Sidebar a comparsa creativa con JavaScript e CSS3

A volte alcune sezioni del nostro sito hanno bisogno di un menu di navigazione a supporto che non tolga però spazio e visibilità ai contenuti. Può essere quindi utile un menu a scomparsa, da richiamare solo nel momento del bisogno.

Ciò che si può arricchire, con l'ausilio delle proprietà di animazione CSS3 e un pizzico di JavaScript, è l'effetto visivo per rendere gradevole e moderna l'interazione.

Nell'articolo riguardante gli esempi di transizioni per le sidebar è presente un'ottima demo che fornisce ispirazioni e modelli pronti per animare le nostre sidebar.

Il click su un pulsante attiverà, tramite la funzione js allegata, l'applicazione della classe (con la transizione desiderata, solitamente transform o transition) all'elemento container: ciò farà si che siano applicate le 2 regole per ridefinire le grandezze di entrambi gli elementi (il nav che contiene il menù e il div.pusher che contiene il contenuto principale.

Come indicato nell'articolo, fare attenzione al mancato supporto di IE10 al preserve-3D.