Menu ad effetto mouseover con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (48.002)

:: Referenze dei fogli di stile Css (41.760)

:: Effetti sui link con i Css (29.617)

:: Testo verticale coi Css (19.875)

:: Angoli smussati in un box coi Css (18.851)

:: Box con effetto ombra con i CSS3 (16.159)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.140)

:: Stilizzare i form Html con i Css (15.906)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.555)

:: Colorare le barre di scorrimento del browser con i Css (14.254)

IN EVIDENZA
DOWNLOAD