Come creare: Menu off-canvas

Crea il Menu Off-Canvas

Primo Passo - Aggiungi HTML：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Chi siamo</a>
  <a href="#">Servizi</a>
  <a href="#">Clienti</a>
  <a href="#">Contatti</a>
</div>
<!-- Usa qualsiasi elemento per aprire la navigazione laterale -->
<span onclick="openNav()">apri</span>
<!-- Se desideri che la navigazione laterale sposti il contenuto della pagina a destra, aggiungi tutto il contenuto a questo div (se desideri che la navigazione laterale rimanga solo in alto nella pagina, non è necessario utilizzare questa impostazione) -->
<div id="main">
  ...
</div>

Secondo passo - Aggiungi CSS:

/* Menu di navigazione laterale */
.sidenav {
  height: 100%; /* Altezza 100% */
  width: 0; /* Larghezza 0 - viene modificato da JavaScript */
  position: fixed; /* Rimane al posto suo */
  z-index: 1; /* Rimane in superficie */
  top: 0;
  left: 0;
  background-color: #111; /* Nero */
  overflow-x: hidden; /* Disabilita lo scorrimento orizzontale */
  padding-top: 60px; /* Contenuto a 60 pixel di distanza dal margine superiore */
  transition: 0.5s; /* Effetto di transizione per 0.5 secondi, per far scorrere la barra di navigazione laterale */
}
/* Link del menu di navigazione */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Cambia il colore quando il mouse è sopra il link di navigazione */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Posizione e stile del pulsante di chiusura (angolo in alto a destra) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Imposta lo stile del contenuto della pagina - se desideri spingere il contenuto della pagina verso destra quando la navigazione laterale è aperta, usa questa opzione */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Modifica lo stile della barra di navigazione laterale su schermi con altezza inferiore a 450 pixel (riduci il margine interno e la dimensione del carattere) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Passo 3 - Aggiungi JavaScript:

Menu esterno

/* Imposta la larghezza della navigazione laterale a 250px, il margine sinistro del contenuto della pagina a 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Imposta la larghezza della navigazione laterale a 0, il margine sinistro del contenuto della pagina a 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Prova personalmente

L'esempio seguente sposta anche la barra di navigazione laterale e spinge il contenuto della pagina verso destra. Tuttavia, questa volta aggiungiamo un sfondo nero semi-trasparente (opacità del 40%) al elemento body per "evidenziare" la barra di navigazione laterale:

Menu esterno con sfondo trasparente

/* Imposta la larghezza della navigazione laterale a 250px, il margine sinistro esterno del contenuto della pagina a 250px e aggiungi un colore di sfondo nero al body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Imposta la larghezza della navigazione laterale a 0, il margine sinistro del contenuto della pagina a 0 e il colore di sfondo del body su bianco */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Prova personalmente

Pagine correlate

Tutorial:Navigazione CSS