Recentemente in un lavoro per un cliente ho implementato, sfruttando i css, un’idea originale per l’effetto hover sul menu, che puoi vedere subito in azione.
E’ sempre importante trovare il modo per distinguersi, curando i dettagli, come si è dimostrato più volte nella rubrica Siti ai Raggi X.
In particolare ho voluto sfruttare il logo dell’azienda, facendolo comparire all’hover sopra le voci del menu.
Ottenere questo effetto è davvero semplice, vediamo come si procede.
Passo 1 – Un po’ di HTML
Il codice HTML per il menu è una semplice lista non ordinata, dove assegniamo l’id menu, per poterci poi riferire ad essa nel codice CSS.
Passo 2 – CSS
Il codice CSS l’ho ampiamente commentato, per eventuali dubbi chiedi nei commenti 
/* padding top assegnato alla lista, necessario poi
* per lasciare lo spazio per il logo */
ul#menu {
padding-top:45px;
}
/* visualizzo gli elementi della lista in linea
* e tolgo il "pallino" nella lista */
ul#menu li {
display:inline;
list-style-type: none;
}
/* imposto la spaziatura tra i link
* importante mettere la misura uguale
* a sinistra e a destra per centrare poi il logo
* all'effetto hover*/
ul#menu li a {
padding: 20px 10px 0 10px;
text-decoration:none;
}
/* impostiamo l'effetto hover, posizionandolo
* al centro e un padding di 20px per posizionare
* il logo sopra le voci del menu */
ul#menu li a:hover {
background:url(images/menu-hover.png) no-repeat center top;
padding-top:20px;
}
Conoscevi questa tecnica? L’hai mai adottata in qualche sito? Condividila nei commenti!
21 settembre 2011 at 11:47
Ehehe!! Abbellire la funzione hover dei fogli di stile è un’accorgimento sottile, semplice ma molto d’effetto!! Feci una cosa simile anch’io per il website di un azienda (che tra l’altro non hanno nemmeno messo online, simpatici…) mentre per il mio sito mi limito a semplici giochini di contrasto-colore. Devo dire che niente è meglio della soluzione più semplice per creare effetti davvero convincenti!! ^^
21 settembre 2011 at 12:16
Ciao Agnese! Esatto! è proprio quello che volevo trasmettere con l’articolo. A volte si vanno a cercare soluzioni complesse per cercare di creare qualcosa di nuovo, quando invece bastano semplici accorgimenti per dare quel tocco di qualità in più
21 settembre 2011 at 20:01
Il buon Fede è tornato
con un semplicissimo tutorial ottimo ottimo 
grazie mille.
22 settembre 2011 at 10:38
Ciao Manuel, sono contento che ti sia utile! a volte anche con tecniche semplici si possono ottenere grandi risultati
22 settembre 2011 at 09:21
Grande Fede sei tornato! sono un tuo lettore appassionato sei un grande! per la tua rubrica siti ai raggi x mi piacerebbe vedere questa mia creazione:
http://www.hotelvilladanci.it/
Passa anche dal mio blog
ti aspetto!
22 settembre 2011 at 10:58
Ciao Riccardo mi fa piacere che mi segui e complimenti per il blog! davvero ben fatto!
Per il sito un’analisi la potrei anche fare! Vediamo! Ho fatto un test al volo e occhio che alla risoluzione di 1024×768 viene tagliato il testo a destra.
22 settembre 2011 at 11:20
Ho usato i media query con gli emulatori mi sa che non gli riconosce xche su schermi “reali” a 1024 si vede bene
hai per caso skype così possiamo rimanere in contatto? mi piacerebbe molto 
aggiungimi pure : riccardo.mel90
26 settembre 2011 at 12:34
Ho provato a vederlo anche su iPad e il testo viene tagliato..
Ok ti aggiungo appena torno dalle ferie..ciao!
Gli ultimi articoli in Html Css
I più commentati
Gli articoli più letti del mese
Quanti siamo on line?
Iscritto a
Partnership