[Pillola] Creare un menu con effetto rollover con i css

giorgiotave

[Pillola] Creare un menu con effetto rollover con i css

Impostare un menu con effetto roolover con i css è facile e si ottengono molti benefici tra cui:

-menu più veloce
-codice più pulito
-migliore accessibilità

Per creare il menu abbiamo bisogno delle classi.

Le classi si definiscono con .nome e si richiamano con class="nome classe"

Una classe di un link ha bisogno anche di

.nome a stato della classe con posizione del mouse out
.nome a:hover stato della classe con posizione del mouse over

Gli attributi sono commentati

Ecco il codice completo


<html>
<head>
<style type="text/css">
<!--

.classecella &#123;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size&#58; 12px;
	color&#58; #000000;
	background-color&#58; #FFFFCC;
&#125;
.classecella a &#123;
	font-family&#58; Verdana, Arial, Helvetica, sans-serif;
	font-size&#58; 12px;
	color&#58; #000099; /* Colore del link */
	text-decoration&#58; none; /* Eliminiamo la sottolineatura del link */
&#125;
.classecella a&#58;hover &#123;
	font-family&#58; Verdana, Arial, Helvetica, sans-serif;
	font-size&#58; 12px;
	color&#58; #CC0000; /* Cambiamo il colore del link al passaggio del 
-->
</style>
</head>

<body>
<table width="100%" border="0">
  <tr> 
    <td class="classecella"><center>
        [url="http&#58;//www.giorgiotave.it"]Tutto Gratis 
      </center></td>
    <td class="classecella"><center>
        [url="http&#58;//www.tourcalabria.it"]Vacanze in Calabria 
      </center></td>
  </tr>
</table>
</body>
</html>