Menu colorato con hover padding

Durante il mio normale saltare da un sito all’altro sono capitato su un template grafico veramente ben realizzato che propone un menu, molto semplice, che sfrutta in modo divertente il padding degli elementi.

La versione originale sfrutta delle immagini di sfondo, per dare un gradiente al bottone. Nella mia mania di semplificare il tutto, l’ho riprodotto cercando di semplificarlo al massimo.

Vediamone il risultato finale ed il codice.

<ul class="menualto">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Log-in</a></li>
</ul>

Per realizzare questo menu non è necessario l’uso di Jquery o di un qualsiasi codice JS. Abbiamo solo bisogno di un buon codice css el’uso di alcune funzioni disponibili con i css3

ul.menualto{list-style:none; width:100%; height:50px;
font-family:arial; font-size:0.7em}
ul.menualto li a{padding:20px; display:block; color:#fff;
text-decoration:none; text-transform:uppercase;}
ul.menualto li:hover{padding-top:10px;margin-top:-10px;}
ul.menualto li{background:#9a3f21;float:left;text-align:center;}
ul.menualto li:nth-of-type(2){background:#4a3f39;}
ul.menualto li:nth-of-type(3){background:#caa022;}
ul.menualto li:nth-of-type(4){background:#60722c;}
ul.menualto li:nth-of-type(5){background:#367076;}
ul.menualto li:nth-of-type(6){background:#e9e5df;}

In effetti l’uso del selettore :nth-of-type è valido per tutti i browser tranne IE quindi se si vuole avere per ogni bottone uno sfondo diverso bisogna assegnare o un ID o una CLASSE ad ogni elemento. Invece, per tutti i browser moderni, l’uso del selettore sopra indicato semplifica notevolmente le cose.

See the Pen Menu hover padding by Marco Casalegno (@kreatore) on CodePen.0

Leave a Comment