Il tutorial che oggi voglio condividere riguarda la realizzazione dell'effetto transform scale sulle voci di menu, con i CSS3, nello stato hover, senza alcun richiamo a files javascript.
Potrebbe essere considerato "l'opposto" dell'effetto transition su menu responsive ma sostanzialmente sono due cose differenti.
Se nel precedente articolo, al passaggio del mouse - o in uno smartphone - 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 alle altre voci.
Menu per desktop
Menu per smartphone
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 markup 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 differenti, 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 sufficienti 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 767 pixel:
@media screen and (max-width:767px){
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 con il mio smatphone.
Per monitor da 768 pixel in poi:
@media screen and (min-width:768px) {
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);
}
Nella pagina demo di esempio possiamo vedere gli effetti transform scale sulle voci di menu.
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.
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.