Come realizzare un HTML Mobile Slide Menu con Animazioni CSS3

gennaio 22, 2014
Share on Facebook1Tweet about this on Twitter26Pin on Pinterest0Share on Google+1

Oggi riprendiamo il discorso delle performance per quanto riguarda le interfacce nei dispositivi mobile, che per caratteristiche hardware sono meno potenti di quelli desktop e riescono a supportare i processi di rendering in maniera molto più difficoltosa.

La strada scelta per realizzare un’animazione CSS3 influenza notevolmente la fluidità e la reattività con cui un dispositivo mobile riesce a metterla in atto, e scrivere gli stili in modo corretto permette di creare Applicazioni Mobile in HTML5 e Javascript che non hanno nulla da invidiare a quelle native.

A tal proposito ti consiglio di leggere:

Il tutorial di oggi: HTML Mobile Slide Menu

In questo tutorial ti voglio mostrare come creare un Mobile Slide Menu con effetto ease e con voci di navigazione animate, utilizzando stili CSS3 performanti e gestendo gli eventi tramite Javascript. Ogni voce di menu sarà animata con un leggero ritardo rispetto a quella precedente, in modo da creare un effetto più accattivante.

L’esperimento potrebbe essere benissimo integrato in una HTML5 Mobile App da utilizzare come versione mobile di un sito web o da distribuire nei vari store, compilandola tramite tools come Phonegap.

mobile-slide-menu-css3

Premessa

Il risultato è ottimizzato per dispositivi mobile e le tecniche utilizzate (come l’accelerazione hardware e la composizione dei livelli grafici)  sono suppurate solo dai browser di ultima generazione. Pertanto, se vuoi integrare il menu in un sito web, è opportuno attuare un’adeguata tecnica di Progressive Enhancement.

Per approfondire il discorso del Progressive Enhancement e per vedere come realizzare uno slide menu ottimizzato su tutti i browser, ti consiglio di leggere questo post:

Il markup HTML

Come primo passo impostiamo il markup HTML del documento, il quale prevede principalmente due elementi essenziali: il contenitore del menu (con al suo interno una lista di 4 voci) e quello dei contenuti dell’applicazione, rispettivamente rappresentati da un elemento <nav>  con classe ‘menu’, e da un <div> con classe ‘content-wrapper’.

Per realizzare il nostro HTML Mobile Slide Menu facciamo in modo di posizionare entrambi gli elementi DOM (‘.menu‘ e ‘.content-wrapper‘) tramite la proprietà position:absolute, per sovrapporre il contenitore dell’applicazione al menu.

Poi, avviando l’effetto slide, il contenitore sarà traslato orizzontalmente dello stesso numero di pixel che compongono la larghezza del menu (260px).

elementi-mobile-slide-menu

Andiamo quindi a vedere il codice CSS3 necessario per raggiungere tale obiettivo.

Gli stili CSS3

Innanzitutto posizioniamo i due elementi, attribuendo al contenitore uno z-index superiore a quello del menu:

Attiviamo l’effetto slide-right, utile per rivelare il menu, impostando il foglio di stile in modo che basti aggiungere una classe all’elemento DOM:

Agendo sulla proprietà di stile transition, richiamiamo, tramite il transform, un tipo di effetto che forza l’accelerazione hardware e quindi la composizione dei livelli grafici (il cui rendering è delegato alla GPU), alleggerendo così i carichi di lavoro e favorendo la fluidità dell’animazione.

Facciamo quindi la stessa cosa per gli elementi della lista del menu, che devono essere traslati anch’essi orizzontalmente e mostrati con una leggera dissolvenza:

Dal codice puoi vedere che l’effetto transition viene attivato solo nel caso in cui all’elemento <nav> del menu venga aggiunta la classe ‘animate-li‘; questo è per animare gli elementi della lista solo nel caso in cui il menu venga aperto, e non durante l’azione di chiusura.

Per rendere l’effetto più accattivante aggiungiamo a tutti gli elementi della lista (tranne il primo) un leggero ritardo rispetto a quello precedente tramite la proprietà transition-delay:

transition-delay-mobile-slide-menu

Impostiamo quindi la classe da giungere al menu per attivare l’animazione sulle 4 voci:

Infine, per inclinare graficamente ogni voce di menu, ci serviamo anche qui della proprietà tansform, tramite la funzionalità skew attivata agendo sull’asse delle Y:

Poiché l’obiettivo era quello di inclinare tutta la voce ma non l’icona, ci siamo serviti di uno <span> posto all’interno del link a cui abbiamo attribuito uno sfondo nero e all’interno del quale abbiamo inserito il testo della rispettiva voce.

Questa tecnica ci ha permesso inoltre di applicare due trasformazioni diverse ad ogni voce di menu, in quanto non sarebbe stato possibile traslare ed inclinare contemporaneamente l’elemento <li> (la possibilità di impostare una sola trasformazione alla volta per ogni elemento è purtroppo una limitazione delle animazioni CSS3).

Il codice Javascript

Andiamo a gestire ora l’evento di click sul pulsante di apertura per aprire o chiudere il nostro Mobile Slide Menu:

Nel momento in cui il pulsante viene cliccato controlliamo se il menu è aperto o chiuso verificando la presenza o meno della classe ‘open-left‘ sull’elemento <nav>.

Se è chiuso, prima attiviamo gli effetti per le voci di menu aggiungendo la classe ‘animate-li‘ al contenitore del menu, poi avviamo le animazioni sia su di esso che sul contenitore delle pagine, aggiungendo ai relativi elementi la classe ‘open-left‘.

Se invece il menu è visible, rimuoviamo la classe ‘animate-li‘ dall’elemento <nav> per non scatenare l’animazione contraria sulle 4 voci, poi rimuoviamo la classe ‘open-left‘ dal contenitore in modo avviare l’effetto slide di chiusura, ed infine, una volta terminato quest’ultimo, riportiamo le voci di menu allo stato iniziale rimuovendo anche dall’elemento <nav> la classe ‘open-left’.

Per vedere come gestire gli eventi di fine transizione e animazione con Modernizr, ti consiglio di leggere questo articolo:

 

mobile-slide-menu-css3

Conclusioni

Dalla demo puoi vedere come il risultato dell’esperimento sia un’animazione fluida e performante, priva di quei sfarfalli e crash che spesso caratterizzano le applicazioni HTML realizzate con framework come jQuery Mobile o jQtouch.

Due piccole note su questo tutorial:

  1. nel codice sopra riportato sono stati aggiunti i prefissi su proprietà come transition e transform per la compatibilità browser; tuttavia sviluppando solo per mobile sarebbe possibile omettere tutti i prefissi tranne quello per browser webkit-based (-webkit-)
  2. per avere un risultato ed una user-experience migliore sarebbe opportuno aggiungere il supporto per il touch, in modo da mostrare il menu durante l’azione di swipe dell’utente.

E tu? Hai mai realizzato delle applicazioni Mobile in HTML4, CSS3 e Javascript? Lascia un commento qui di seguito e fammi sapere le tue opinioni a riguardo!

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

HTML-mobile-accelerato-ebook-cover

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.

  • Pingback: Come realizzare un mobile slide menu con animaz...

  • Pingback: HTML5 Mobile app: transizioni e animazioni CSS3 (parte 2) | Your Inspiration Web

  • sixdas

    Ciao Giacomo, sto provando ad adattare il tuo tutorial alla app che sto cercando di realizzare. Ma sto riscontrando un problema, in pratica funziona tutto correttamente, ma se dalla pagina index.html vado alla pagina contatti.html, e poi ritorno alla index.html, il pulsante per aprire il menu non funziona più, se clicco non succede nulla, ma se aggiorno la pagina ritorna a funzionare. Secondo te cosa potrebbe essere, sbaglio io qualcosa o già avevi notato questo problema?

    • Giacomo Freddi

      Ciao sixdas!
      Grazie per il commento.

      Non dovresti mai ricaricare la pagina, se il tuo intento è quello di realizzare una mobile app di tipo single-page-application. La caratteristica di questo tipo di applicazioni è proprio quella di non ricaricare mai la pagina principale (solitamente la pagina index.html), a parte la prima volta, all’avvio dell’applicazione.

      Questo soprattutto se il tuo intento è quello di compilare l’app per distribuirla nei vari stores.

      Detto ciò il tuo codice dovrebbe funzionare ugualmente, anche perchè si tratta di codice CSS e Javascript, gli stessi che puoi trovare in qualunque normale sito web. Comunque, per capire meglio il problema dovrei esaminare i sorgenti del codice.

      Se hai difficoltà puoi inviarmelo, magari gli do un’occhiata ;)

      Giacomo

      • sixdas

        Ciao Giacomo,
        Mi sa che ho sbagliato io tutto l’approccio nel realizzare l’app. Con jquery mobile, stavo realizzando un app di tipo single-page-application. Mentre con Ratchet, stavo seguendo la strada del pagine (index.html, pagina1.html, pagina2.html) che quindi risulta sbagliata…

        Grazie per i consigli adesso cerco di capire come creare una single-page-application senza jquery

        Salvatore

        • Giacomo Freddi

          Ciao Salvatore,

          effettivamente hai ragione, avevi proprio invertito i concetti, anche se vedo che ora hai capito la logica. ;)

          Attenzione però, non “senza jQuery”, ma senza il framework di jQuery per i mobile: “jQuery Mobile”.

          jQuery di per sé è sempre utile in qualsiasi progetto!

          Giacomo

x

Vuoi realizzare HTML Mobile Apps?

Hey! Hai già visto alcune delle mie app? Se vuoi imparare a realizzare una mobile app in HTML ti potrebbe interessare HTML Mobile Accelerato , l'e-book che sto scrivendo sull'argomento: E-book | HTML Mobile Accelerato