Press "Enter" to skip to content

Bootstrap Offcanvas: creare un menu laterale a scorrimento

Condividi il post con i tuoi amici o colleghi

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 😉


Condividi il post con i tuoi amici o colleghi
amazon acrylic paint