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.



  
    
      
      Brand
    
    
      
        Home
        Author
        Contacts

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 😉

Google Maps API e PHP: usare il Geocode

Realizzare animazioni con JavaScript, ecco come fare

CakePHP: invalidare un form in un controller

Condividi il post con i tuoi amici o colleghi