Creare un menu off-canvas con CSS3

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.