CSS3 slide panel: tutorial su come realizzare un menu stile mobile

novembre 27, 2013
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest3Share on Google+4

Come sicuramente avrai capito leggendo i miei post, ho un vero e proprio debole per le mobile web app e per l’impiego dei CSS3 al fine di rendere più piacevole la user-experience delle mie interfacce.

Con il miglioramento costante delle caratteristiche hardware dei dispositivi mobili è possibile avvicinarsi sempre di più alle prestazioni di applicazioni native, realizzando effetti come animazioni e transizioni puramente in CSS3.

Inserire nelle web app elementi come touch sliders, slide menu, pull-to-refresh scroll, e molti altri componenti che siamo ormai abituati a vedere nelle applicazioni native, diventa quindi meno complicato.

L’impiego nei siti web

Effetti del genere ovviamente non sono limitati soltanto a smartphone o tablet, ma si possono implementare anche nei “classici” dispositivi desktop. Numerosi web designer e developer li inseriscono per esempio nei propri progetti per renderli più piacevoli e per stupire in modo originale il visitatore.

In questo articolo ti voglio parlare proprio di come realizzare un CSS3 slide panel menu, effetto che ho trovato ultimamente in molti siti web, e che può essere utilizzato in tutti i dispositivi.

CSS3-slide-panel-upcreative

Quello che realizzeremo in questo tutorial è quindi un menu CSS3 slide panel, che appare o scompare al click su uno specifico pulsante.

square-space-css3-slide-menu

Squarespace usa la tecnica dello slide menu nel proprio sito

Uno degli aspetti fondamentali che caratterizzerà il risultato finale è l’introduzione, se pur a livello base, di un concetto molto importante nell’ambito della compatibilità: il miglioramento progressivo tramite CSS3 (o CSS3 Progressive Enhancement).

Il Progressive enhancement è una strategia impiegata nel web design che utilizza le tecnologie web a più livelli, per permettere a chiunque di accedere a contenuti e funzionalità di base del sito (o della web app) indipendentemente dal browser o dalla connessione utilizzata, fornendo anche una versione migliorata della pagina per coloro che dispongono di un browser più avanzato o maggiore larghezza di banda.

Fonte: Wikipedia

Per quanto riguarda il nostro esperimento, la tecnica di base consisterà nel basare l’animazione dello sliding panel sulla proprietà left per i browser che non supportano le css transform, mentre sulla proprietà translate3d per quelli che la supportano.

Così facendo potremo guadagnare in termini di fluidità e le prestazioni (per capire quali sono gli attributi sui quali agire per migliorare fluidità e prestazioni ti consiglio di leggere: Performance CSS3: consigli per ottimizzare le animazioni).

Ma veniamo al punto.

Il markup HTML

Dal codice puoi vedere che il menu (class = “menu-wrap”) ed il pulsante di toggle (id=”toggle”) sono stati inseriti all’interno di un wrapper principale con class=”menu”, che sarà poi quello su cui effettueremo l’animazione, assieme al body stesso della pagina

Gli stili CSS

Vediamo gli stili per il wrapper principale del menu:

Ora impostiamo gli stili del menu-wrapper che è contenuto all’interno del panel menu principale, quelli del pulsante di chiusura (id=”menu-close”), e quelli del pulsante “toggle”:

Ora impostiamo gli stili del contenuto principale della pagina:

Infine, ecco il punto focale del nostro esperimento, dove avviene “la magia”, ovvero il momento in cui scegliamo quale proprietà modificare oper effettuare l’animazione in base alla compatibilità del browser:

Qui vengono definite le due differenti tecniche di animazione distinte in base alla classe del body: se esso ha la classe “with-translate” (significa che il browser supporta la proprietà CSS transform), allora animeremo body e menu traslandoli con la l’attributo “transform: translate3D“, altrimenti lo faremo agendo sulla proprietà “right”.

Il file Javascript

Infine qualche riga di codice per aggiungere o togliere la classe “open” dal body e dal menu, all’evento “click” dei pulsanti desiderati. Controlliamo inoltre, sfruttando modernirz ( che ho incluso nel documento, puoi verificarlo scaricando il codice sorgente), se il browser supporta le CSS transform oppure no (in caso positivo aggiungiamo la classe “with-translate” al body).

Ecco fatto: ora possiamo visualizzare un vero e proprio CSS3 slide panel menu con tanto di Progressive Enhancement per i dispositivi che non supportano le funzionalità CSS3 più recenti!

CSS3-slide-panel-upcreative

Se ti è piaciuto l’articolo, perché non lo condividi?

Hey! Sto scrivendo un e-book su come aumentare le performance e la fluidità per le tue HTML mobile app! Segui i consigli e le tecniche di cui mi sono servito per creare le mie applicazioni (come Tint, Dieta SI o NO?).
Iscriviti alla newsletter per sapere quando sarà pronto!
HTML-mobile-accelerato-ebook-cover

HTML Mobile Accelerato (E-book)

Lascia la tua email per ricevere aggiornamenti e sapere quando sarà disponibile

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.