Creare un menu responsive a scomparsa

Nell’articolo precedente abbiamo visto come rendere un sito responsive in modo che si adatti a qualsiasi risoluzione. Avevamo lasciato in sospeso il discorso del menu di navigazione, discorso che affronteremo in questo tutorial dedicato alla realizzazione di un menu a scomparsa.

Realizzeremo due varianti: nella prima faremo scivolare il sito a destra lasciando spazio per la comparsa del menu da sinistra,  mentre la seconda versione è quella classica con il menu che scorre dall’alto spingendo il resto del sito verso il basso.

Esempi menu responsive

Cominciamo dalla prima variante. La struttura HTML che utilizzeremo è quella del tutorial precedente ma per comodità riporto il codice completo

<!DOCTYPE html>
<html>
   <head>
      <title>Responsive website</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" type="text/css" href="../../demo-includes/css/main-style.css">
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <div class="container">
         <header>
            <img src="images/navbar.png" class="navbar-toogle" />
            <div class="logo">
               <img src="../mobile/images/logo.png" alt="my website">
            </div>
            <nav class="main-menu">
               <ul>
                  <li>Page 1</li>
                  <li>Page 2</li>
                  <li>Page 3</li>
                  <li>Page 4</li>
               </ul>
            </nav>
         </header>
         <main>
            <div id="primary" class="content">
               <h1>Article title</h1>
               <p>
                <img class="alignleft medium" src="../mobile/images/image1.jpg" alt="a simple image" />
                Testo articolo
               </p>
            </div>
            <div id="secondary" class="sidebar">
               <div class="widget">
                  <h2>Widget title</h2>
                  <ul>
                     <li>Link 1</li>
                     <li>Link 2</li>
                     <li>Link 3</li>
                  </ul>
               </div>
               <!-- widget -->
            </div>
            <!-- sidebar -->
         </main>
         <footer>
            <div class="credit">
               Sito realizzato da me
            </div>
            <nav class="footer-nav">
               <ul>
                  <li>Page 1</li>
                  <li>Page 2</li>
                  <li>Page 3</li>
               </ul>
            </nav>
         </footer>
      </div>
   </body>
</html>

Burger IconAbbiamo fatto solo una piccola modifica, aggiungendo una piccola immagine all’interno dell’header che servirà per visualizzare l’icona del menu a scomparsa. Potete trovarne diverse in rete oppure potete realizzarne una con un qualsiasi programma di grafica. In finale si tratta semplicemente di tre piccole linee parallele.

Restiamo all’interno del file HTML e prima della chiusura del body includiamo la nostra libreria Javascript preferita: jQuery. Per l’installazione della libreria abbiamo a disposizione diversi metodi, per cui vi rimando dedicato ai primi passi con jQuery.

Ora definiamo una funzione che venga eseguita quando l’utente clicca sull’icona, applicando al menu e al contenitore principale il metodo toggleClass() che aggiunge o rimuove una classe all’elemento.

<script type="text/javascript" src="../../demo-includes/js/jquery.js"></script>
<script type="text/javascript">
jQuery(function()
{
 jQuery('.navbar-toogle').click(function()
 {
  jQuery('.container, nav.main-menu').toggleClass('open');
 })
})
</script>

Spostiamoci all’interno del foglio di stile e scriviamo le dichiarazioni che ci servono per ottenere l’effetto desiderato. Definiamo alcune proprietà per l’icona del menu come margini, un float a sinistra, le dimensioni e la proprietà display impostata su none, in quanto non vogliamo che l’icona sia visibile per le risoluzioni desktop.

.navbar-toogle {
  width: 48px;
  height: 48px;
  margin: 12px 10px 12px 0;
  display: none;
  float: left;
}

Le altre dichiarazioni CSS sono identiche a quelle del tutorial precedente e non mi sembra il caso di riportarle nuovamente. Definiamo una nuova media query (o modifichiamo l’ultima del tutorial precedente) valida per i dispositivi con larghezza massima di 400 pixel. Per il contenitore principale impostiamo una posizione relativa e una coordinata left pari a zero, mentre al menu principale applichiamo una position fixed e una coordinata left negativa, in modo da collocarlo fuori dall’area di visualizzazione.

Creiamo due nuovi selettori per la classe open, creata dinamicamente da jQuery quando l’utente clicca sull’icona a forma di hamburger. La classe open per il container cambierà il valore di left da 0 a 250px, facendolo scivolare a destra e lasciando lo spazio per il menu, al quale invece daremo un left pari a zero. Applichiamo al container e al menu un un effetto transiction in modo da rendere l’animazione molto più morbida. Definiamo la proprietà display sul block per l’icona in modo renderla visibile e aggiustiamo gli elementi del menu in modo che ognuno sia un blocco unico.

@media screen and (max-width: 400px) {
  .container {
    position: relative;
    left: 0;
  }

  .container.open {
    left: 250px;
  }

  nav.main-menu {
    position: fixed;
    left: -250px;
    padding-left: 30px;
  }

  nav.main-menu.open {
    left: 0;
  }

  .container, nav.main-menu {
    transition: all 0.3s ease;
  }

  .navbar-toogle {
    display: block;
  }

  nav.main-menu ul li{
    display: block;
    margin-left: 0;
  }

  nav.main-menu{
    float: none;
    margin-right: 0;
  }
}

Il risultato finale dovrebbe essere quello che è possibile osservare in questa demo. Vi ricordo che per cambiare le dimensioni dell’area di visualizzazione dovete utilizzare la combinazione di tasti Ctrl + Shift + M.

Allego anche il video tutorial relativo a questo argomento che avevo realizzato qualche tempo fa.

[responsive_video url=”https://www.youtube.com/watch?v=BuUPwJGy44k”]Guarda il video tutorial[/responsive_video]

Menu a scomparsa con scorrimento verso il basso

Adesso occupiamoci del menu a scomparsa versione classica. Il codice HTML è identico al precedente, facciamo solo una piccola modifica all’interno dell’header, inserendo un div che contenga sia il logo che l’icona del menu.

<header>
   <div class="header-container">
      <img src="images/navbar.png" class="navbar-toogle" />
      <div class="logo">
         <img src="../mobile/images/logo.png" alt="my website">
      </div>
   </div>
   <nav class="main-menu">
      <ul>
         <li>Page 1</li>
         <li>Page 2</li>
         <li>Page 3</li>
         <li>Page 4</li>
      </ul>
   </nav>
</header>

Per quanto riguarda l’implementazione con jQuery utilizzeremo semplicemente il metodo slideToggle, applicandolo solo al menu principale.

<script type="text/javascript" src="../../demo-includes/js/jquery.js"></script>
<script type="text/javascript">
   jQuery(function(){
                     jQuery('.navbar-toogle').click(function(){
                                                               jQuery('nav.main-menu').slideToggle();
                                                              })
   })
</script>

All’interno del foglio di stile, creiamo la nostra media query che in realtà non necessita di grandi implementazioni. Definiamo solamente la proprietà display: none per il menù e un display: block e overflow: hidden per il contenitore di logo e icona.

@media screen and (max-width: 400px) {

  .container {
    margin: 0 auto;
    padding: 0 10px;
  }

  nav.main-menu {
    display: none;
  }

  .header-container{
    display: block;
    overflow: hidden;
  }

  .navbar-toogle {
    display: block;
    float: right;
  }

  nav.main-menu ul li {
    display: block;
    margin-left: 0;
  }

  nav.main-menu {
    float: none;
    margin-right: 0;
  }
}

Il risultato lo potete osservare in quest’altra demo, tenendo sempre presente quanto esposto in precedenza per cambiare l’area di visualizzazione.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *