Home>Guide>Creare un menu off-canvas con CSS3

Creare un menu off-canvas con CSS3


Creare un menu off-canvas con CSS3


L’off-canvas è una tipologia di menu di navigazione in cui l’elemento HTML che contiene il menu stesso è posto al di fuori dell’area visibile (viewport) e viene visualizzata all’utente su sua esplicita azione di richiesta, ad esempio, cliccando su un pulsante. Questa tecnica è spesso utilizzata nel mobile, dove l’ottimizzazione degli spazi è una priorità, ma ultimamente si sta diffondendo molto anche su web app fruibili da dispositivi con risoluzioni desktop.

  • Leggi l'articolo, ti bastano solo 3 minuti, 0 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Passo 1: HTML

La struttura del markup HTML è molto semplice. Per prima cosa, costruisci un pulsante, che diventerà il trigger (attivatore) per il nuovo menu off-canvas; per realizzarlo, però, ecco una tecnica un po’ inusuale che ti permetterà di utilizzare solamente il CSS per attivare/disattivare la visualizzazione del menu:

<input type="checkbox" id="offcanvas-toggle" />
<label for="offcanvas-toggle">&equiv;</label>

Adesso, costruisci un semplice menu, fatto di qualche link demo:

<ul class="offcanvas">
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Lorem ipsum</a></li>
</ul>

In realtà, l’elemento <input> viene nascosto da CSS (come vedrai in seguito), ma è necessario che venga posizionato gerarchicamente in modo da avere lo stesso elemento padre rispetto al menu off-canvas. Il pulsante vero e proprio, è costituito dalla <label> dell’elemento <input> (associati tra loro tramite l’attributo for=”” dell’elemento <label> che “punta” all’ID dell’elemento <input>).

Inoltre, è necessario che tutto il contenuto non off-canvas, sia inserito in un elemento separato, ad esempio:

<div class="wrapper">
	[…] CONTENUTO PAGINA […]
</div>

Tenendo conto di questa piccola premessa, puoi creare un markup un po’ più elaborato e completo, come ad esempio:

<input type="checkbox" id="offcanvas-toggle" />
<ul class="offcanvas">
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Lorem ipsum</a></li>
</ul>
<div class="wrapper">
	<nav>
		<label for="offcanvas-toggle">&equiv;</label>
	</nav>
	<div class="container">
		[…] CONTENUTO PAGINA […]
	</div>
</div>

Passo 2: CSS

Ora non ti resta che dare un po’ di stile, con particolare attenzione alle regole necessarie al funzionamento del menu di navigazione off-canvas.

Partendo dal menu off-canvas:

.offcanvas {
	bottom: 0;
	left: 0;
	position: fixed;
	top: 0;
	width: 320px;
	transform: translateX( -100% );
}

In particolare, con la regola alla riga 7, “spostiamo” il menu al di fuori della viewport, così da renderlo non visibile in fase iniziale.

Per quanto riguarda il pulsante, invece:

#offcanvas-toggle { display: none; }
#offcanvas-toggle:checked ~ .offcanvas { transform: translateX( 0 ); }
#offcanvas-toggle:checked ~ .wrapper { transform: translateX( 320px ); }

Tre semplicissime righe, ma che sono la colonna portante di tutto il lavoro!

  • Nella riga 1, viene nascosto l’elemento <input> (come anticipato in precedenza)
  • Nella riga 2, viene specificato che, nel caso l’elemento <input> sia selezionato (checked), il menu off-canvas subisce uno “spostamento” orizzontale che lo faccia partire la pixel zero (quindi dall’estrema sinistra della viewport)
  • Nella riga 3, come per la riga precedente, ma a subire lo spostamento è il contenitore principale, che viene spostato di tanti pixel quanto è la grandezza del menu off-canvas.

Da sottolineare, l’utilizzo del selettore ~ (chiamato “general sibling”) che ha il significato di:

Seleziona gli elementi con classe “offcanvas” che sono successivi all’elemento con ID “offcanvas-toggle” che risulta selezionato. Inoltre, i due elementi devono avere lo stesso elemento padre


Passo 3: Rendiamo tutto in movimento

Non resta che creare qualche animazione un po’ più fluida, ma come promesso, senza utilizzare jQuery o Javascript.
Ti basta aggiungere una semplice regola di CSS3 agli elementi che subiranno gli spostamenti, ovvero all’elemento contenitore .wrapper ed al menu di navigazione .offcanvas:

.wrapper,
.offcanvas { transition: all 0.25s; }

Ed ecco l’effetto finale, davvero molto molto bello ed elegante, guardalo su JSFiddle.




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Creare un effetto hover animato sulle immagini con CSS3

Creare un effetto hover animato sulle immagini con CSS3


Ecco come dare vita alle immagini nel nostro sito applicando delle stupefacenti animazioni utilizzando solamente CSS3 attivate dal semplice passaggio del mouse.

Creare un preloader animato con CSS3

Creare un preloader animato con CSS3


Nel seguente articolo vedremo come creare un preloader per le tue pagine utilizzando CSS3 così da avere una soluzione più flessibile e facilmente modificabile ed aumentare le prestazioni del tuo sito.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)