L'off-canvas è una tecnica di navigazione, particolarmente utilizzata per Mobile, in cui un menù è posizionato fuori dalla viewport e, a seguito di un'azione, spinge (o scivola) sulla pagina fino ad essere fruibile dall'utente.
Con bootstrap possiamo combinare griglie e CSS per creare un menù off-canvas.
Realizziamo un bottone, che sia visibile solo per device extra-small, cui assegniamo un trigger secondo lo stile di Bootstrap: data-toggle="offcanvas"
Costruiamo una griglia con due colonne, la prima occcupa 12/12 da xs a sm, quindi, da sm in poi occupa 9/12:
...
La seconda colonna occupa 6/12 da xs a sm, quindi occupa 3/12:
...
La nostra struttura apparirà così:
......
Dentro la prima colonna includiamo la nostra pagina, nella seconda un menù.
Lorem ipsum dolor sit amet...
Con queste impostazioni, al di sotto dei 768px la colonna di destra flotterà sotto quella di sinistra. Per evitarlo forziamo il comportamento di default di Bootstrap associando alla colonna del menù una classe .sidebar-offcanvas, che al di sotto di una certa risoluzione lo posizioni maniera assoluta.
@media screen and (max-width: 767px) {
.sidebar-offcanvas {
position: absolute;
top: 0;
right: -50%;
}
}
Sempre nella media query creiamo una classe, da associare a tutta la .row, che fissi il suo margine destro indipendentemente dalla viewport e che scorra con una certa "dolcezza" se soggetta a una transition:
.row-offcanvas {
position: relative;
right: 0;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
Non ci resta che concatenare questa classe con una classe "trigger", che chiameremo .active, che sposti la nostra .row del 50% spingendola da destra:
.row-offcanvas.active {
right: 50%; /* 6 columns */
}
Manca solo un piccolo accorgimento, una modifica sull'intera pagina per evitare che con device più stretti appaia uno scroller orizzontale nella finestra del browser:
html,
body {
overflow-x: hidden; /*Prevent scroll on narrow devices */
}
Il nostro CSS apparirà così:
html,
body {
overflow-x: hidden; /*Prevent scroll on narrow devices */
}
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.sidebar-offcanvas {
position: absolute;
top: 0;
right: -50%;
}
.row-offcanvas {
position: relative;
right: 0;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas.active {
right: 50%; /* 6 columns */
}
}
Associamo le classi CSS alla nostra struttura:
Lorem ipsum dolor sit amet...
Manca il trigger? Andiamo ad aggiungerlo con jQuery
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});