bootstrap-offcanvas

Ormai tutti utilizziamo Twitter Bootstrap per il frontend dei nostri progetti web e mobile. Si, lo usi anche tu, lo so. Perchè è fico, bello, utile, ben progettato e, soprattutto, ben supportato. Io non ne farei mai a meno.

Oggi vediamo come implementare un menu laterale a scorrimento per le nostre mobile app in html5. Bootstrap, di base, prevede nella sua navbar che il menu “collapsi” (si, l’ho detto) nel pulsantino che, poi, apre un menu a tendina contenente il menu di navigazione. Utile ma non il massimo esteticamente.

Utilizzando Bootstrap Offcanvas possiamo implementare il menu facendolo entrare lateralmente a scorrimento.

Ecco il codice della nostra navbar che prevede bootstrap offcanvas.

 
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#navbar-offcanvas">
        <span class="sr-only">Toggle navigation</span>
        <span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="navbar-offcanvas navbar-offcanvas-touch" id="navbar-offcanvas">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Author</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </div>
  </div>
</nav>

Per far richiudere il menu quando si clicca su uno dei link possiamo aggiungere il seguente codice jQuery:

$( "#navbar-offcanvas a" ).on( "click", function() {
  $("#navbar-offcanvas").trigger("offcanvas.close");
});

Esistono diverse librerie che permettono di implementare il menu offcanvas. Segnalaci le tue soluzioni se ne hai altre, altrimenti, condividi l’articolo. Al prossimo articolo su Bootstrap 😉

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.