Kreatore.it

Sviluppo applicativi Lamp

Menu colorato con hover padding

Scritto da: | Categorie: ,

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 e è 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.

Tags: , , , ,

Articoli Simili

Cerca per tag

admin, ajax, android, apache, app, audio, backup, beta, blog, bordi, browser, caffè, calcolo, calibre, categorie, cd, chrome, clienti, cloud, cms, condivisione, css3, csv, database, debian, desktop, download, drive, driver, dump, e-reader, evolution, file, firefox, flash, font, foto, freelance, funzioni, gd, gedit, gimp, htc, html5, iexplorer, immagini, indirizzo, inkscape, internet, ip, iphone, java, javascript, jquery, kivy, kv, less, lettura, link, linux, live, mac, macchina, mail, menu, mobile, mod, mp3, mysql, nautilus, network, newsletter, ombra, open office, opera, os, paypal, pdf, picasa, plugin, python, safari, skype, smartphone, smf, ssh, stampante, tabs, tag, tastiera, terminale, test, testo, textile, textpattern, theme, ubuntu, usb, video, web editor, website, windows, wysiwyg, xfce4, youtube

Cerca per categoria

© 2011 Kreatore.it :: Sito web realizzato da Marco Casalegno

TXP | Admin | Home | Back to Top

Tutte le informazioni e le immagini sono rilasciate sotto licenza secondo la Creative Commons License 2.0.