Menu ad effetto mouseover con i Css

Autore: Luca Ruggiero | Tell a Friend Corso HTML Impara il linguaggio di marcatura per il Web. Corso CSS Web Design ed Accessibilità secondo il W3C!

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>

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