Fw

Wordpress Creative Developer

Menu CSS con Effetto Hover Originale

  • Html Css
  • -

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.

Menu Css Hover Originale per Il tuo Sito

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!

8 Commenti

  1. 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!! ^^

    • 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ù 😉

  2. Il buon Fede è tornato 😀 con un semplicissimo tutorial ottimo ottimo 😀 grazie mille.

    • Ciao Manuel, sono contento che ti sia utile! a volte anche con tecniche semplici si possono ottenere grandi risultati 😉

  3. 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!

    • 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.

      • 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

      • Ho provato a vederlo anche su iPad e il testo viene tagliato..

        Ok ti aggiungo appena torno dalle ferie..ciao!

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *