• Community Manager

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