Css tutorial: Menu animato con effetto elastico.
In questo tutorial vedrai come creare un menu orizzontale animato con effetto elastico utilizzando HTML e CSS, in particolare useremo la pseudo classe :hover e la proprietà transition dei CSS.
l’obiettivo di questo menu è quello di creare una piacevole animazione effetto elastico unita alla più totale personalizzazione dei colori e dimensioni.
HTML
La struttura HTML di partenza sarà molto semplice, come per la maggiorparte dei menu i tag più consigliati sono ul o ol e li
<ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contatti</a></li> </ul>
CSS
Nel file CSS la prima cosa che ho fatto è dare una foma al tag ul con class=”menu”, in questa maniera:
.menu { overflow:auto; border-bottom:medium #333 solid; padding:0; position:relative;}
La proprietà overflow:auto è fondamentale per fare in modo che lo spazio occupato dal box ul si adatti perfettamente alla dimensione delle voci del menu contenute nel tag li e fare in modo che la proprietà border-bottom agisca in modo corretto.
Di seguito invece le proprietà CSS applicate al tag li nei sui stati normale e over:
li {background-color:#999; display:inline-block; padding: 10px 20px 10px 20px; margin:0 auto; list-style-image: none; -moz-transition: all 0.3s ease-in-out; /* FF4+ */ -o-transition: all 0.3s ease-in-out; /* Opera 10.5+ */ -webkit-transition: all 0.3s ease-in-out; /* Saf3.2+, Chrome */ transition: all 0.3s ease-in-out; } li:hover { background-color:#333; padding: 10px 40px 10px 40px; -moz-transition: all 0.3s ease-in-out; /* FF4+ */ -o-transition: all 0.3s ease-in-out; /* Opera 10.5+ */ -webkit-transition: all 0.3s ease-in-out; /* Saf3.2+, Chrome */ transition: all 0.3s ease-in-out;}
la proprietà transition è da inserire sia nel tag li sia nel tag li con lo stato :hover questo permetterà un animazione fluida in entrambi gli stati del mouse sopra la voce del menu.
per fare in modo che il bottone cambi dimensione sono andato ad operare sulla proprietà padding, aumentando il paddding destro e sinistro rispetto ai due stati, come nell’esempio sotto:
li {padding: 10px 20px 10px 20px } li:hover{padding: 10px 40px 10px 40px}
in questa maniera il box del tag li con lo stato :hover aumenterà la sua dimensione di 40 px in totale, 20px a destra e 20px a sinistra.
Un’altro metodo è quello di andare ad operare sulla proprietà width del tag li andando a modificare anche la proprietà transition in questa maniera:
li { ... width:20%; -moz-transition: width 0.3s ease-in-out; /* FF4+ */ -o-transition: width 0.3s ease-in-out; /* Opera 10.5+ */ -webkit-transition: width 0.3s ease-in-out; /* Saf3.2+, Chrome */ transition: width 0.3s ease-in-out;} li:hover { ... width:40%; -moz-transition: width 0.3s ease-in-out; /* FF4+ */ -o-transition: width 0.3s ease-in-out; /* Opera 10.5+ */ -webkit-transition: width 0.3s ease-in-out; /* Saf3.2+, Chrome */ transition: width 0.3s ease-in-out;}
Personalizzare il menu
Se volessimo personalizare ogni voce del menu basterà operare sul tag li sia nel codice HTML che CSS, in questa maniera:
<ul class="menu"> <li class="red"><a href="#">Home</a></li> <li class="orange"><a href="#">About</a></li> <li class="yellow"><a href="#">Portfolio</a></li> <li class="blue"><a href="#">Contatti</a></li> </ul>
aggiungendo una class con un determnato nome per ogni tag li rendo possibile una modularità completa del menu, potendo operare sui CSS come nell’esempio sotto:
li.red { background-color: #DF504C; padding: 10px 20px 10px 20px;} li.red:hover { padding: 10px 40px 10px 40px; } li.orange { background-color: #E58F4E; padding: 10px 20px 10px 20px;} li.orange:hover { padding: 10px 40px 10px 40px;} li.yellow { background-color: #FFCC00; padding: 10px 20px 10px 20px;} li.yellow:hover { padding: 10px 40px 10px 40px;} li.blue { background-color: #445D94; padding: 10px 20px 10px 20px;} li.blue:hover { padding: 10px 40px 10px 40px;}
in questa maniera ho assegnato ad ogni voce del menu un colore differente tramite la proprietà background-color manetenendo sempre una transizione animate tramite la proprietà padding.
Le transition di css3 sono una “manna dal cielo”
Concordo, semplici e utili, uso spesso questa proprietà
Ottima guida davvero, complimenti.
Ho visto che hai usato la transizione dei CSS3: con che browser ancora non sono perfettamente compatibili?
Un saluto
Ciao Cifra, grazie.
purtroppo non funziona con internet explorer e le nuove versioni di FF.
Semplice e parecchio carino
Grazie Gabri, purtoppo non funziona ancora a pieno con internet explorer o firefox a meno che tu non usi qualche metodo per abilitarne la resa corretta.
eeeh purtroppo… eh si, prima o poi mi metterò a studiarmi qualcosa.
ciao, eehm scusatemi la mia ignoranza, ma il codice html e i file css dove si mettono per realizzare questo menu? scusate se vi faccio questa domanda stupida, sono un principiante, aspetto con ansia la vostra risposta!
Ciao, non ti preoccupare, la tua domanda è giusta, se tu clicchi su download all’inizio di questo tutorial vedrai che ti si scaricherà un file di nome index.html, io ho inserito per comodità sia il codice HTML che quello CSS di questo menu all’interno di questo file e ho inserito quello CSS tra i tag style contenuti a loro volta dentro i tag
<head></head>, mentre il codice HTML per creare la struttura del menu tra i tag
<body></body>, se non conosci i tag head e body ti consiglio di andarlteli a vedere perchè sono fondamentali per il funzionamento di una pagina web.
Se vuoi per fare chiarezza puoi separare il codice HTML da quello CSS in questa maniera:
1. Crei una cartella dove vuoi, anche sulla tua scrivania, e la nomini come ti piace (per esempio menu) all’interno ci metti il file index.html che hai scaricato.
2. Apri il file con un editor di testo come blocco note, selezioni tutto il codice che tovi tra i tag
<style></style>lo tagli e lo incolli in un nuovo documento che puoi creare sempre con blocco note o text edit o notepad e ci incolli all’interno tutto il codice (ricordati di cancellare i tag style) a questo punto salvi il documento con un nome a piacere per esempio stile-menu.css ricordati di dargli l’estensione .css
3- Iserisci anche questo file all’interno della cartella che hai creato all’inizio sulla scrivania
4- A questo punto riapri il file index.html e tra i tag head inserisci il collegamento al file stile-menu.css
inserendo questo codice
<link rel="stylesheet" type="text/css" href="stile-menu.css"></link>Ora avrai il file index.html che conterrà solamente il codice HTML del menu e il foglio di stile CSS per modificare l’aspetto di questo menu in un file separato, in questo caso è stile-menu.css