Menu con effetto mouseover

Pubblicità su lukeonweb.net a partire da 0,5 euro CPM e sconti fino al 50% !!!

» I più cliccati » I più votati

Web Wizard & Tools

Web Grafica

Siti utili

Cartucce per la Stampante

Homepage + Linguaggi + Css + Trucchi + Art.# 122

Autore: Luca Ruggiero

Corso HTML
Impara il linguaggio di marcatura per il Web. finale ed assistenza del tutor online.

Corso CSS ed XHTML
Web Design ed Accessibilità secondo il W3C! Attestato finale ed assistenza del tutor online.

Le conoscenze acquisite fino ad ora sui Css ci permettono adesso di essere messe a frutto realizzando qualcosa di concreto.

Trattando i Css una tematica improntata sul design e sulla grafica, cosa c'è di meglio che realizzare un bel menu!

I contraddittori sapranno di certo trovare 1000 e più cose di meglio, ma... per ora accontentiamoci :-)

Il menu che andiamo a realizzare è di natura molto semplice, l'effetto che intendiamo ottenere, come descritto nel titolo, è il mouseover: abbiamo già potuto ammirare la dinamicità e la semplicità con cui i Css ci permettono di ottenere questo gradevole effetto.

Combinando una serie di attributi Css con un po di fantasia possiamo ottenere un menu che si presenta contenuto in un box con i link disposti verticalmente e cambiare colore del testo e dello sfondo al passaggio del mouse.

Definiamo all'interno di una pagina Html di prova un foglio di stile composto da tre classi, vediamo il codice intero del nostro Css opportunamente commentato:

<style type="text/css">
   /* Definisce lo stile di un layer contenitore del menu */
   div.main {
      border: Solid 1px #000000;
      width: 150px;
   }
   /* Definisce lo stile di ogni singolo layer nelle sue parti più spicciole */
   div.menu {
      background: #EEEEEE;
      font-size: 11px;
      font-family: Verdana;
   }
   /* Definisce lo stile dei link al caricamento */
   a.menu {
      background: #EEEEEE;
      color: #000000;
      padding: 1px;
      /* Permette di ottenere l'effetto anche se il mouse non è sul testo */
      position: Relative;
      text-decoration: None;
      /* Imposta il contenuto del layer per la larghezza del layer stesso */
      display: Block;
   }
   /* Definisce lo stile dei link al passaggio del mouse (modificati solo i colori) */
   a:hover.menu {
      background: #00003E;
      color: #FFFFFF;
      padding: 1px;
      position: Relative;
      text-decoration: None;
      display: Block;
   }
</style>

La materiale costruzione del menu è la seguente

<div class="main">
   <div class="menu"><a href="http://www.lukeonweb.net" class="menu">Homepage</a></div>
   <div class="menu"><a href="http://www.lukeonweb.net/forum.asp" class="menu">Forum</a></div>
   <div class="menu"><a href="http://www.lukeonweb.net/top100.asp" class="menu">Top 100</a></div>
</div>

richiamiamo le classi sui layer e sui link.

Ecco un esempio.