Come creare un Menu animato in CSS3 senza Javascript
di Tina Daniele | 31 Mar 2014 | in: Xhtml & Css
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.
L'autore

Web e Graphic Designer dal 2009, freelance dal 2013, grammar nazi da sempre. Sono un'estimatrice della cultura giapponese, dei videogames retro e delle pogate ai concerti. Sostengo la sublime arte del dormire con cura e costanza, insieme alla musica e al mangiare. Talvolta anche contemporaneamente.
Sito web dell'autore | Altri articoli scritti da Tina Daniele
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
- JavaScript: jQuery sì o no?
Una delle funzionalità più apprezzate di JavaScript è senza dubbio la sua facile estendibilità: questo linguaggio di programmazione permette...
- Come creare animazioni con le CSS Transitions?
Nell'articolo precedente abbiamo parlato dei CSS3 Transforms, come modo per modificare gli elementi della pagina. Oggi facciamo il primo passo verso...
16 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ne ho avuto bisogno proprio stamattina!
Comunque anche se si sa utilizzare js al meglio, credo sia preferibile inserire i tag nel file html e non farli inserire da uno script: oltre ad essere piu’ ordinato credo che sia anche piu’ usabile il codice… sbaglio?
Ciao Andrea,
come avrai capito sono una sostenitrice del css, piuttosto che del js, per cui cerco di approfondire sempre il primo.
Riguardo la tua domanda, lo script deve essere comunque richiamato nell’head per poter funzionare, se è questo ciò che intendevi.
Sono della tua stessa opinione: gli script (come hai gia commentato a qualcuno) molte volte vanno in conflitto e ultimamente mi sta capitando :(
Riguardo alla domanda parlavo della pulizia del codice:
alcuni script scrivono all’interno del file html, ma non ho mai amato questo comportamento… a volte mi creano problemi, ma dato che il js non ti piace forse e` meglio che risponda uno sviluppatore javascript
Vi segnalo che il link per visualizzare il risultato finale non funziona. Per il resto articolo interessante Grazie
Ciao Giovanni,
grazie per la segnalazione, abbiamo provveduto a sistemare i link, ora dovrebbero funzionare :)
Ottima guida semplice e utile! brava.
Ciao Andrea,
grazie mille :)
Ciao Tina
Articolo veramente ottimo, sono un appassionato di Html5 e Css3 e più cose riesco a fare solo con loro meglio mi sento. Proverò subito a fare un menù su uno dei miei siti.
Io mi preoccupo sempre di stare attento al responsive e credo che non dovendo caricare il Javascript alleggerisca di parecchio o sbaglio ?
Ciao Matteo,
esatto, oltre ad alleggerire il documento non hai neanche il problema che qualche script vada in conflitto con altri.
Buon proseguimento!
Sempre molto utile!
Grazie :)
Ah sempre bello non usare js (anche perchè sono scarsissimo)
però non mi vanno molto bene le animazioni con safari, quanto ci metto sti browser ad aggiornarsi?
Bella domanda… dipendesse da me, ne lascerei massimo due di browser in tutto l’etere! :/
Ciao Tina e grazie della chiarezza.
Il CSS3 è un gran bel passo in avanti così come l’HTML5. Peccato che siamo alle solite riguardo l’adozione degli standard da parte dei produttori dei browser e in particolar modo faccio riferimento a Microsoft. Vorrei sottolineare il fatto che nel momento in cui si passa alla fase implementativa di un progetto (e in particolare Web Site, Portali Web o Web Application) è bene tenere in mente gli strumenti da utilizzare.
Esistono ancora realtà (in particolare aziendali) dove per policy il browser ufficiale è acora IE8 che non supporta CSS3 e quindiil menù in CSS3 non funzionerebbe. IE8 ha ancora una quota di utilizzo di ben ~22%.
Bye,
Antonio.
…riporto il link con la diffusione dei browser 2013-2014 http://netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpsp=2013&qpnp=2&qptimeframe=Y
Bye,
Antonio.
pardon ma usare il jquerry che è molto meglio!!!!!!!!!!!