L'articolo odierno prevede la realizzazione di effetti di transizione sulle voci di menu, solo con codice CSS.
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 di seguito presentano lo stesso menu sia per la versione desktop, sia per la versione smartphone:
Al passaggio del mouse su ciascuna voce di menu, ogni item assumerà un aspetto differente, riempiendo il colore di sfondo uguale a quello dell'icona selezionata, testo bianco, e mostrando la descrizione. A solo scopo dimostrativo ho realizzato un menu con 4 voci:
- Home
- Sitemap
- Rss
- Cerca
Importare Font Awesome icon fonts nella pagina web
E' possibile fare il download di tutto il pacchetto di Font Awesome icon fonts, o richiamarlo nella <head> della pagina:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
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="fas fa-cloud"></i>. Questo è il codice che va scritto. Non serve altro.
Il markup HTML del menu
<ul>
<li class="home">
<a href="#" title="Home">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="text">HOME</span>
</a>
</li>
<li class="sitemap">
<a href="#" title="Sitemap">
<span class="icon"><i class="fas fa-sitemap"></i></span>
<span class="text">SITEMAP</span>
</a>
</li>
<li class="rss">
<a href="#" title="RSS">
<span class="icon"><i class="fas fa-rss"></i></span>
<span class="text">RSS</span>
</a>
</li>
<li class="cerca">
<a href="#" title="Cerca">
<span class="icon"><i class="fas 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 do Font Awesome, e l'altro il testo che apparirà quando siamo con il mouse, o con il dito, (per smartphone o tablet), 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 Mediaqueries 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 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;
}
E' 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 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. 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. Possiamo vedere gli effetti di transizione con CSS3 sulle singole voci direttamente nella pagina demo.
Per passare dalla versione desktop a quella smartphone, è sufficiente restringere ed allargare la pagina.
Basta davvero poco per rendere un po' più accattivante qualche elemento della pagina per attirare l'attenzione dei visitatori.