Menu animato in HTML e CSS

in questo breve e semplice tutorial, ho realizzato un menu animato utlizzando HTML e un pò di CSS mescolato a CSS3 con la pseudo classe :last-child.

Download Demo

Come nel precedente tutorial, anche questa volta la pseudo classe :hover unito alla proprietà transition dei css3 sono i principali elementi su cui mi sono basato.

1. L’HTML

per realizzare il menu sono partito da un div che contenesse una lista non ordinata ul con all’ interno alcune voci inserite tra i tag li.

<div id="menu">
<ul>
	<li><a href="#">home</a></li>
	<li><a href="#">about</a></li>
	<li><a href="#">portfolio</a></li>
	<li><a href="#">Rss</a></li>
</ul>
</div>

2. CSS

Per cominciare ho dato uno stile al div menu, facendo in modo che fosse centrato automaticamente nello schermo, assegnandoli una larghezza e uno spazio dal limite alto dello schermo grazie al valore padding:10%

#menu { width:500px; margin:auto; padding: 10% 0 0 0; }

Subito dopo ho creato lo stile per i tag ul, li e a.

ul {
	font-size:18px;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #333333;
	border-bottom: solid thin #333333;
}
ul li {
	display:block; //Serve per visualizzare il menu in blocchi disposti orizzontalmente.
	padding:30px; //Decido un margine interno di 30px per ogni voce del menu.
	border-bottom: solid thin #ccc;
	border-top: solid thin #333;
}
ul li a {
	color: #333333;
	text-decoration: none;}

ul li:hover { background-color:#D3E3E3;
            padding: 30px 30px 30px 100px;
           -moz-transition: all 0.7s ease-out;  /* FF3.7+ */
           -o-transition: all 0.7s ease-out;  /* Opera 10.5 */
           -webkit-transition: all 0.7s ease-out;  /* Saf3.2+, Chrome */
           transition: all 0.7s ease-out; }

L’ ultimo valore della proprietà padding 100px è quella fondamentale per fare spostare la voce del menu da sinistra verso destra mentre 0.7s è il tempo in secondi che impiegherà a eseguire lo spostamento di 70px.

#ul li:hover:last-child {
	background-image:url(rss.png);
	background-repeat: no-repeat;
	background-position: 200px 0px; //l'icona compirà un movimento di 200px da sinistra verso destra all'icona.
}

:last-child è una pseudo classe intodotta con i CSS3, questa è molto utile per semplificare alcuni tipi di operazioni con i fogli di stile, in questo caso farà in modo che al passaggio del mouse sull’ultima voce del menu li compaia una icona.
Il problema è che su IE e nelle versioni un pò datate dei browser più famosi non è riconosciuta, quindi non funzionante, per questo un altro metodo per ottenere lo stesso risultato sarà aggiungere una classe all’ultimo tag li del menu ul.
Quinidi:

<div id="menu">
<ul>
	<li><a href="#">home</a></li>
	<li><a href="#">about</a></li>
	<li><a href="#">portfolio</a></li>
	<li class="icona"><a href="#">Rss</a></li>
</ul>
</div>

e associargli di conseguenza questo CSS.

ul li.icona:hover {
	background-image:url(rss.png);
	background-repeat: no-repeat;
	background-position: 200px 0px;}

Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

7 Risposte per Menu animato in HTML e CSS

  1. Rocco Passaro 20 dicembre 2010 at 09:03 | Permalink | Reply

    Bella questa animazione ;)

  2. Gabriele malaspina 20 dicembre 2010 at 23:23 | Permalink | Reply

    Bello, mi piace!
    ma non sarebbe stato meglio applicare il padding e l’effetto hover al link (impostato come display:block) piuttosto che al li? in modo tale che tutta la striscia sia cliccabile.
    Non so se ho reso l’idea.

    • Francesco 21 dicembre 2010 at 10:01 | Permalink | Reply

      Si capisco, è una soluzione anche quella, forse anche migliore, è che mi sembrava più corretto così.

  3. matteo 29 dicembre 2010 at 16:51 | Permalink | Reply

    Ciao, se volessi farlo in orizzontale il menu’ invece che in verticale cosa devo scrivere dopo display?

    • Francesco 29 dicembre 2010 at 21:28 | Permalink | Reply

      Ciao Matteo non so se è da un pò che segui il blog o sei appena arrivato comunque, benvanuto.

      Per fare in modo che il menu venga visualizzato in orizzontale devi cambiare la proprietà Display:block in Display:inline.

      Vedrai che però dovrai anche cambiare altri parametri perchè la visualizzazione non sarà il massimo dato che questo menu è stato pensato verticalmente, ti consiglio di cambiare subito anche la dimensione in larghezza del men width:500px aumentandola a 960px per esempio, oppure width:100%

  4. matteo 30 dicembre 2010 at 00:55 | Permalink | Reply

    Grazie mille, è da pochissimo che seguo il blog, mi piace moltissimo e credo che ci faro’ molte visite :)

Lascia un commento

Trackbacks