Bootstrap Offcanvas: creare un menu laterale a scorrimento

Pubblicato il 20 Luglio 2016

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.

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 😉

Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: