Come creare un Menu animato in CSS3 senza Javascript

Esistono molti web designer che conoscono in modo impeccabile HTML e CSS, ma hanno carenze per quanto riguarda Javascript. Per questo cercano delle soluzioni alternative alle animazioni che potrebbero ottenere con l’ausilio di javascript.

Queste alternative hanno un nome: effetti in CSS3.

La volta scorsa abbiamo scoperto come creare un background animato facendo riferimento ad alcune di queste tecniche in CSS3, stavolta invece andremo ad analizzare tutte le fasi necessarie al processo di costruzione di un semplice Menu a 4 voci, ognuna con un’animazione diversa.

Partiamo col creare lo scheletro del menu in questione.

#1 Costruzione del menu

Innanzitutto, creeremo una nuova cartella che ospiterà i nostri files, in cui andremo a caricare il file index.html e stile.css . 

Fatto ciò, possiamo cominciare a costruire il nostro menu nel file index.html in questo modo:

<div class="container">
    <nav>
        <ul>
            <li class="slide"><a href="#">slide top</a>
            	<ul class="nascosto">
                	<li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                </ul>
            </li>
            	
            <li class="dissolvenza"><a href="#">dissolvenza</a>
            	<ul class="nascosto">
                	<li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                </ul>
            </li>
            <li class="slidesotto"><a href="#">slide bottom</a>
            	<ul class="nascosto">
                	<li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                </ul>
            </li>
            <li class="ridimensiona"><a href="#">ridimensionamento</a>
            	<ul class="nascosto">
                	<li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                    <li>lorem ipsum</li>
                </ul>
            </li>
        </ul>
    </nav>

Dal codice è possibile constatare che ogni voce di lista <li> ha una classe che, nel foglio di stile, darà origine ad un determinato effetto.

Noteremo che il menu, in questo caso, è piazzato in un contenitore vuoto con classe “container” <div class=”container”>, ma è possibile posizionarlo in qualsiasi altro posto, copiandone il contenuto da <nav> a </nav> (compresi i due tag nav).

Il menu, privo di stile, si presenterà in questo modo:

I titoli delle voci di menu rappresentano il tipo di’effetto che andremo poi ad inserire nel css.

L’esempio è visualizzabile qui

 #2 Lo stile

Come secondo step, andremo ad applicare lo stile al nostro Menu, semplice ma sempre efficace, adattabile a qualunque tipo di template, con un colore grigio tenue di background che potrà essere modificato in un secondo momento.

Ecco come si presenta il codice nel nostro file stile.css:

body { margin:0px; padding:0px;}
.container { width:750px; margin:30px auto; background: #f7f7f7; padding-top:20px; height:350px;}
nav {}
nav ul { }
nav ul li { display:inline-block; }
nav ul li a { background:#ccc; color: #999; 
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
padding: 10px 30px; text-decoration:none; 
text-shadow:1px 1px 0px #eaeaea; 
text-transform:uppercase;}
nav ul li ul.nascosto {     background: none repeat scroll 0 0 #CCCCCC;
    margin: 0;
    padding: 10px 0;
    visibility: hidden;
    width: auto;}
nav ul li:hover ul.nascosto { visibility:visible;}
nav ul li ul.nascosto li {  display: block;
    padding: 2px 0;
    text-align: center; color: #fff;}

Di seguito un’anteprima del nostro menu:

Adesso il nostro Menu ha un colore, una forma e soprattutto uno stile, ma a noi non basta.
L’esempio è visualizzabile qui

Nel prossimo paragrafo scopriremo finalmente le potenzialità del CSS3.

#3 Le animazioni: Slide top

In questa parte analizzeremo le varie voci e i relativi effetti animati.

Il primo effetto che andremo a creare è quello dello slide che parte dall’alto.

Il sottomenu, quindi, comparirà in maniera scorrevole dall’alto, partendo da un’opacità uguale a 0, quindi invisibile, per comparire man mano con opacità piena.

Il codice sarà:

/* slide top */
nav ul li.slide ul.nascosto {    
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
	 -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -o-transform: translateY(-80px); 
    -ms-transform: translateY(-80px);
    transform: translateY(-80px); 
	opacity:0;
	}
nav ul li.slide:hover ul.nascosto { 
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
	opacity:1;}

Analizziamo il codice:

• transition: 1s ease-in-out; stabiliamo che la transizione del menu dovrà durare 1 secondo e l’effetto avrà una partenza lenta e una fine, quindi non darà quella sensazione di “stacco” improvviso.
• transform:  translateY(-80px); con il valore translateY stabiliamo che il nostro sottomenu dovrà partire da una posizione verticale (Y) di -80px rispetto alla sua posizione originale, poi capiremo il perché.
• Opacity: 0; stabiliamo che il sottomenu dovrà essere, in un primo momento, trasparente, quindi invisibile.

Sul <li> in hover, quindi, il sottomenu con la classe “nascosto” avrà le seguenti proprietà:

• transform: translateY(10px); in questo modo stabiliamo che dovrà spostarsi verticalmente (Y) di 10px rispetto alla posizione originale, per dare un effetto di movimento.
• Opacity: 1; il sottomenu diventa visibile.

(NB. il codice è stato ottimizzato per tutti i principali browser)

#4 Le animazioni: Dissolvenza

Il secondo effetto che andremo a vedere è quello della dissolvenza.

Quest’effetto è molto semplice e richiede veramente poche righe di codice:

/* dissolvenza */
nav ul li.dissolvenza ul.nascosto {
	-webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
	opacity:0;
	}
nav ul li.dissolvenza:hover ul.nascosto { opacity:1;}

Analizziamo il codice:

• Transition: 1s ease-in-out; stabiliamo che la transizione del menu dovrà durare 1 secondo e l’effetto avrà una partenza lenta e una fine, quindi non darà quella sensazione di “stacco” improvviso.
• Opacity: 0; stabiliamo che il sottomenu dovrà essere, in un primo momento, trasparente, quindi invisibile.

Sull’hover il sottomenu comparirà grazie ad un’opacità uguale a 1 emulando, appunto, la dissolvenza.

#5 Le animazioni: Slide bottom

Quest’effetto presenterà quasi le stesse proprietà dell’effetto slide che parte dall’alto che abbiamo precedentemente visto, con la differenza che comparirà dal basso.

Il codice sarà:

/* slide bottom */
nav ul li.slidesotto ul.nascosto {    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
	 -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -o-transform: translateY(80px);
    -ms-transform: translateY(80px);
    transform: translateY(80px); 
	opacity:0;
	}
nav ul li.slidesotto:hover ul.nascosto { -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px); 
	opacity:1;}

Analizziamo il codice:

• transition: 1s ease-in-out; stabiliamo che la transizione del menu dovrà durare 1 secondo e l’effetto avrà una partenza lenta e una fine, quindi non darà quella sensazione di “stacco” improvviso.

• transform: translateY(-80px); stavolta, diversamente dall’effetto precedente, con il valore translateY stabiliamo che il nostro sottomenu dovrà partire da una posizione verticale (Y) di 80px rispetto alla sua posizione originale, per cui ce lo ritroveremo comparire dal basso.

• Opacity: 0; stabiliamo che il sottomenu dovrà essere, in un primo momento, trasparente, quindi invisibile.

Sul <li> in hover, quindi, il sottomenu con la classe “nascosto” avrà le seguenti proprietà:

• transform: translateY(0px); in questo modo il sottomenu ritornerà alla sua posizione originale.

• Opacity: 1; il sottomenu diventa visibile.

#6 Le animazioni: Ridimensionamento

Come ultimo effetto, analizzeremo quello del ridimensionamento, grazie al quale la voce di menu subirà un ingrandimento al passaggio del mouse, mentre il sottomenu comparirà in dissolvenza con un leggero collasso verso il basso.

Il codice:

/* ridimensiona */

nav ul li.ridimensiona ul.nascosto {    
	-webkit-transition: all 1s ease-in-out;
    -moz-transition:all  1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all  1s ease-in-out;
	opacity: 0;
	}
nav ul li.ridimensiona:hover ul.nascosto {  
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px); 
	opacity:0.6;}
	
nav ul li.ridimensiona:hover {	
    -webkit-transition: all 1s ease-in-out;
    -moz-transition:all  1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all  1s ease-in-out;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);}
nav ul li.ridimensiona {   
    -webkit-transition: all 1s ease-in-out;
    -moz-transition:all  1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all  1s ease-in-out;}

Analizziamolo:

• transition: 1s ease-in-out; stabiliamo che la transizione del menu dovrà durare 1 secondo e l’effetto avrà una partenza lenta e una fine, quindi non darà quella sensazione di “stacco” improvviso.
• Opacity: 0; stabiliamo che il sottomenu dovrà essere, in un primo momento, trasparente, quindi invisibile.
• Transform: scale (1);la voce di menu partirà da una dimensione originale, priva di mutazioni.
• Transform: translateY(10px); il sottomenu subirà un collasso di 10px dalla posizione originale.
• Opacity: 0.6; sull’hover, il sottomenu sarà trasparente del 60%.
• Transform: scale(1.2); la voce di menu si ingrandirà leggermente.

Il risultato finale è possibile osservarlo qui.

Conclusioni

Il menu è uno degli elementi principali di un sito web, uno dei primi con cui l’utente interagisce. Per questo è fondamentale che sia usabile, semplice e d’effetto. Con queste tecniche è possibile realizzare menu accattivanti e semplici con qualche riga di codice. Se l’avete utilizzato o avete intenzione di farlo, fatemi sapere cosa ne pensate nei commenti!

Potete scaricare il pacchetto con il codice completo a questo link.