Menu responsive CSS3 con effetto Transform Scale

Il tutorial che oggi voglio condividere riguarda la realizzazione di un menu responsive con effetto Transition Scale, realizzato interamente con i CSS3 e senza alcun richiamo a files javascript. Potrebbe essere considerato "l'opposto" del menu con transizioni e font Awesome ma sostanzialmente sono due cose differenti.

Se nel precedente articolo, al passaggio del mouse - o in uno smartphone touch - la grandezza del font diminuiva, facendo spazio al testo descrittivo dell'icona, nel menu odierno, quando viene interessata l'area "sensibile" del menu - vale a dire la singola voce - la stessa aumenta di dimensioni, ponendosi in primo piano rispetto all'utente che guarda il documento web.

Di seguito due immagini descrittive di quanto andremo a realizzare:

Menu con Transition Scale per monitor con dimensione superiore a 650 pixel
Menu con Transition Scale per monitor con dimensione superiore a 650 pixel
Menu con Transition Scale per monitor con dimensione inferiore a 650 pixel
Menu con Transition Scale per monitor con dimensione inferiore a 650 pixel

Come si può notare dalle 2 immagini, la voce interessata, al passaggio del mouse è posta in primo piano rispetto alle altre. Sia per desktop, sia per smartphone. Il tutto grazie alla proprietà transform:scale dei CSS3.

Il codice HTML del menu

Il codice HTM non ha assolutamente nulla di particolare. E' tutto markup molto familiare. Vediamone una parte:

<ul>
   <li class="home">
      <a href="#" title="Home">HOME</a>
   </li>
   .............
</ul>

La classe <li class="home"> serve per assegnare un colore differente ad ogni voce del menu.

Il codice CSS del menu

Il codice CSS, della singola voce del menu, è il seguente:

ul li a 
{
height:             60px;
line-height:        60px;
display:            block;
text-decoration:    none;
-webkit-transition: all .2s ease-in-out;
-mz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}

Come si può notare, le prime 4 righe di codice non contengono codice particolare. Dal quinto rigo in poi, si deve assegnare la proprietà transition, declinata per i differenti browsers, la quale "prepara" all'evento che avverrà al passaggio del mouse. Per l'esempio specifico, ho dichiarato un tempo pari a 2 decimi di secondo, con effetto ease-in-out.

Siccome ogni singola voce deve subire uno "spostamento" in avanti, oltre ad assumere dimensioni diffenti, la trasformazione va configurata con la proprietà hover. Infatti abbiamo:

ul li a:hover
{
-webkit-transform: scale(1.3);
-mz-transform:scale(1.3);
-o-transform:scale(1.3);
-ms-transform:scale(1.3);
transform:scale(1.3);
}

transform:scale(1.3) indica che l'elemento interessato subirà un "ingrandimento" pari a 0.3. Se il rapporto è 1:1, al passaggio del mouse interverrà la proprietà scale che si occuperà della trasformazione.

Il resto del codice CSS non prevede particolari dichiarazioni, se non l'assegnazione di un colore differente per lo sfondo di ogni voce di menu.

Rendere il menu responsive

Come si è visto nelle immagini presentate all'inizio dell'articolo, il menu è adattabile sia per devices piccoli, quali smartphone, sia per tablet, sia per monitor per pc. Per fare in modo di avere questa versatilità, sono sufficenti poche righe di codice CSS. Innanzitutto riporto la dichiarazione per l'elemento <ul>.

ul 
{
margin:     30px auto;
width:      90%;
padding:    0;
list-style: none;
}

Il menu ha una larghezza pari al 90% del suo contenitore in quanto non sarebbe stato ben visibile l'effetto scale se avessi dichiarato una larghezza pari al 100%. Per quanto riguarda, invece, il codice CSS del menu responsive, di seguito le dichiarazioni:

Per monitor fino a 649 pixel:

@media screen and (max-width:649px)
{
ul li a 
{
width:        84%;
margin-left:  auto;
margin-right: auto;	
text-align:   center; 
}
}

Da notare, nel blocco di codice appena postato, che la dimensione per la singola voce è stata calcolata tenendo conto dell'effetto scale, dopo aver fatto diverse prove conil mio smatphone.

Per monitor da 650 pixel in poi:

@media screen and (min-width:650px) 
{
ul li a 
{
float:  left;
width:  25%;
}
}

Se si vuole mantenere l'effetto scale anche sulla voce attiva, relativa alla pagina che si sta visitando, basta aggiungere nel codice CSS dello stato :hover, il seguente codice:

ul li.active a

di conseguenza, il codice completo diventa:

ul li a:hover,ul li.active a
{
-webkit-transform: scale(1.3);
-mz-transform:scale(1.3);
-o-transform:scale(1.3);
-ms-transform:scale(1.3);
transform:scale(1.3);
}

Conclusioni

Con pochissimo lavoro abbiamo ottenuto, grazie alla potenza dei CSS3, un effetto molto simpatico e per nulla invasivo, da poter aggiungere alle nostre pagine web. La demo completa relativa all'articolo in oggetto, mostra il menu in azione. Per vedere l'adattabilità dello stesso menu, alle differenti dimensioni dello schermo, restringi la finestra del browser o richiama la pagina di esempio tramite un cellulare o un tablet. Se in qualche passaggio non sono stato abbastanza chiaro, non esitare a contattarmi, inviandomi una email.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati