Responsive Menu Transitions con CSS3 e font Awesome icons fonts

L'articolo odierno prevede la realizzazione di un menu responsive, adattabile ad ogni dimensione di media, con l'ausilio dei CSS3 ed icone. Tali icone altro non sono che "fonts" reperibili dalla libreria "Font Awesome". La particolarità del menu in oggetto è quella di far apparire, sullo stato :hover, la descrizione per ogni singola voce.

Le due immagini si seguito presentano lo stesso menu per la versione desktop e per la versione smartphone:

Menu transitions per desktop
Menu per desktop
Menu transitions per smartphone
Menu per smartphone

Quando si passa con il mouse su ciascuna icona, ogni item del menu assume un aspetto differente, riempiendo il colore di sfondo uguale a quello dell'icona selezionata, testo bianco, e mostrando la descrizione per ciascuna voce:

Importare Font Awesome nella pagina web

Invece di fare il download di tutto il pacchetto delle icons fonts, possiamo inserire un solo rigo di codice nella <head> della pagina:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Fatto. In questo modo possiamo riprodurre, nel documento web, tutte le icone messe a disposizione, senza nessun ausilio di immagini grafiche. Come fare per scrivere una icona? Basta collegarsi al sito di Font Awesome. E' presente tutto l'elenco completo delle icone. Per esempio, se volessimo scrivere una nuvoletta (cloud), è sufficente cliccare su di essa e copiare: <i class="fa fa-cloud"></i>. Questo è il codice che va scritto. Non serve altro.

Torniamo al nostro progetto iniziale. Come riportato nelle immagini, si tratta di realizzare un semplice menu, il cui codice HTML è il seguente:

<ul>	
    <li class="home">
     <a href="#" title="Home">
       <span class="icon"><i class="fa fa-home"></i></span>
       <span class="text">HOME</span>
     </a>				
    </li>
			
    <li class="sitemap">
      <a href="#" title="Sitemap">
	    <span class="icon"><i class="fa fa-sitemap"></i></span>
		<span class="text">SITEMAP</span>
	  </a>					
    </li>
		
    <li class="rss">
      <a href="#" title="RSS">
       <span class="icon"><i class="fa fa-rss"></i></span>
       <span class="text">RSS</span>
     </a>					
    </li>	

    <li class="cerca">
      <a href="#" title="Cerca">
       <span class="icon"><i class="fa fa-search"></i></span>
       <span class="text">CERCA</span>
      </a>					
    </li>
</ul>

La particolarità, rispetto agli altri menu, è l'introduzione di 2 elementi <span>. Uno contenente il codice del Font Awesome, e l'altro il testo che apparirà quando siamo con il mouse, o con il dito, su uno dei 4 items.

Il codice CSS

ul 
{
margin:     0;
padding:    0;
list-style: none;
}

ul li a 
{
height:             100px;
line-height:     	100px;
display:    		block;
text-decoration: 	none;

transition-property:	all;
transition-duration: 	600ms;

-webkit-transition-property: all;
-webkit-transition-duration: 600ms;
 
-o-transition-property: all;
-o-transition-duration: 600ms;
 
-moz-transition-property: all;
-moz-transition-duration: 600ms;
}

Siccome il menu dovrà adattarsi anche agli smartphone, ho scritto, nel codice CSS, le dichiarazioni a livello generale. La prima dichiarazione annulla margin, padding e non mostra i markers delle liste.

Nella seconda dichiarazione viene assegnata l'altezza (100px), l'interlinea, display:block in quanto tutta l'area deve essere sensibile al mouse ed eliminiamo la sottolineatura di default sui link. Nel gruppo successivo, introduciamo le "transizioni" CSS. Il tempo in cui esse devono avvenire è pari a 600 millisecondi ed impostiamo la proprietà su "all".

Il passaggio successivo prevede l'implementazione delle Media Queries perchè gli items del menu devono estendersi per tutta la largheza del viewport fino alla dimensione di 649 pixel (una voce sotto l'altra). Dai 650 pixel in poi, le voci saranno affiancate.

@media screen and (max-width:649px)
{
ul li a 
{
width:         100%;
text-align:    center; 
border-bottom: 1px solid #f0f0f0;
}
}

@media screen and (min-width:650px) 
{
ul li a 
{
float:         left;
width:         25%;
border-right:  1px solid #f0f0f0;
}

ul li:last-child a
{
border-right:  none; 
}

ul li a:hover 
{
border-right:   0px solid #fff; 
}
}

Notare che nella versione smartphone, ho impostato il bordo inferiore per le voci del menu. Nei devices più grandi il bordo è sulla destra, ad eccezione dell'ultima voce, alla quale è stato tolto mediante la dichiarazione:

ul li:last-child a
{
border-right:  none; 
}

Il codice CSS per la span.icon

L'elemento span.icon, che contiene l'icon font, deve essere trattato con un proprio codice CSS a parte. Infatti, come possiamo vedere:

ul li a span.icon 
{
display:       block;
width:         100%;
height:        100%;
font-size:     5em;

transition-property:   font-size;
transition-duration:   600ms;

-webkit-transition-property: font-size;
-webkit-transition-duration: 600ms;
 
-o-transition-property: font-size;
-o-transition-duration: 600ms;
 
-moz-transition-property: font-size;
-moz-transition-duration: 600ms;
}

è stato assegnato un font-size pari a 5em, reso anch'esso display:block, alto 100 pixel. Anche sull'elemento span.icon dobbiamo dichiarare le transizioni CSS, specificando quale elemento deve essere modificato, una volta che siamo sull'icona nello stato :hover: il font-size e con la medesima durata dell'elemento ul li a: 600 millisecondi.

Il codice successivo, stabilisce la grandezza del font:

ul li a:hover span.icon 
{
font-size:  2em;
}

Il codice CSS per la span.text

In ultimo, lo span.text che contiene il testo vero e proprio, mostrato solo quando siamo nell'area sensibile di ogni singola voce del menu.

ul li a span.text 
{
display:	block;
width:		100%;
font-size:	0px;

transition-property:    all; 
transition-duration:    600ms;
 
-webkit-transition-property: all; 
-webkit-transition-duration: 600ms;
 
-o-transition-property:  all;     
-o-transition-duration:  600ms;
 
-moz-transition-property: all;    
-moz-transition-duration: 600ms;
}

Da notare la grandezza del font: font-size:0px in quanto non deve essere visibile, oltre alle transizioni CSS. Il codice, per lo stato :hover, invece, è il seguente:

ul li a:hover span.text 
{
margin-top:  -70px;
font-size:   1.20em;
}

Il testo, prima "nascosto", salirà dal basso verso l'alto, motivo per cui è stato assegnato un margine superiore negativo pari a 70 pixel ed un font-size di 1.2em.

Le classi CSS per le singole voci del menu

Come si può notare dalle immagini riportate all'inizio, ogni singola icona ha un suo colore diverso. Il tutto è stato possibile ottenerlo mediante le classi assegnate ad ogni voce.

ul li.home a 
{ 
color:      #435a6a; 
background: #fff;
}

ul li.home a:hover {background: #435a6a;}

La stessa cosa è stata fatta per le altre voci, ognuna con classe differente. Facendo un passo indietro, sui link delle voci ul li a sono state dichiarate le transizioni. Perchè il passaggio dal colore iniziale per il font e per il background deve avvenire in maniera omogenea al pari di tutti gli altri elementi. Il tutto avviene nell'arco di tempo di 600 millisecondi. Se non avessi dichiato le transizioni, sempre per ul li a, avremmo avuto la transizione "a scatti" per colore font e colore di sfondo.

In ultimo, per assegnare il colore di testo bianco all'elemento span.text, nello stato :hover, è sufficente un'altra dichiarazione come la seguente:

ul li.home a:hover span.text ,
ul li.sitemap a:hover span.text,
ul li.rss a:hover span.text,
ul li.cerca a:hover span.text
{
color:		#fff;
}

Conclusioni

Siamo giunti al termine della realizzazione del nostro menu. Come si può vedere nel file di esempio della demo, le transizioni aggiungono qualcosa in più alla pagina web, nonostante abbiamo realizzato un semplicissimo menu. Basta davvero poco per rendere un po'più accattivante qualche elemento della pagina per attirare l'attenzione dei visitatori.

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