Menu ad effetto rollover sul puntatore del link in DHTML
Il menu che prendiamo in considerazione in questo articolo è un semplice menu verticale che riporta, all'inizio della voce del menu stesso, un puntatore colorato come quello mostrato nell'immagine seguente:
Implementeremo lo script in DHTML utilizzando come linguaggio Javascript lato client.
Iniziamo dal codice HTML del menu che, le cui singole voci, per questioni di layout, sono state spezzate in tre righe, ma potete anche scriverle su di una sola riga. Segue il codice:
<div id="MENU">
<div class="MENU" onmouseover="MenuON('A')"
onmouseout="MenuOFF('A')"><span id="A"></span>
<a href="voce_a.html" class="MENU">Voce A</a></div>
<div class="MENU" onmouseover="MenuON('B')"
onmouseout="MenuOFF('B')"><span id="B"></span>
<a href="voce_b.html" class="MENU">Voce B</a></div>
<div class="MENU" onmouseover="MenuON('C')"
onmouseout="MenuOFF('C')"><span id="C"></span>
<a href="voce_c.html" class="MENU">Voce C</a></div>
<div class="MENU" onmouseover="MenuON('D')"
onmouseout="MenuOFF('D')"><span id="D"></span>
<a href="voce_d.html" class="MENU">Voce D</a></div>
<div class="MENU" onmouseover="MenuON('E')"
onmouseout="MenuOFF('E')"><span id="E"></span>
<a href="voce_e.html" class="MENU">Voce E</a></div>
</div>
Conteniamo il tutto in un unico livello di testo a cui assegnamo id="MENU".
Ogni singola voce del menu è composta da un livello di testo con class="MENU" che fa riferimento alle funzioni MenuON() e MenuOFF() rispettivamente agli eventi onmouseover ed onmouseout.
All'interno di ogni singola voce di menu abbiamo un altro livello, di tipo SPAN stavolta, ad ognuno dei quali è assegnato un ID differente; segue poi la singola voce del menu.
Passiamo al codice CSS di ogni singolo elemento HTML contemplato fino a questo momento:
<style type="text/css">
div
{
font-size: 10px;
font-family: Verdana;
}
#MENU
{
width: 150px;
}
#A, #B, #C, #D, #E
{
background: #FF0000;
width: 12px;
margin: 0px 5px 0px 0px;
border: Solid 1px #000000;
}
div.MENU
{
font-weight: Bold;
padding: 3px 3px 3px 3px;
margin: 0px 0px 3px 0px;
border-right: Solid 1px #000000;
border-bottom: Solid 1px #000000;
}
a.MENU
{
color: #000000;
text-decoration: None;
}
</style>
C'è davvero poco da dire, si tratta di soli elementi stilistici, poco funzionali al fine del funzionamento dello script di cui segue il codice:
<script type="text/javascript">
function MenuON(ID)
{
document.getElementById(ID).style.background = "#FFFF00";
}
function MenuOFF(ID)
{
document.getElementById(ID).style.background = "#FF0000";
}
</script>
Come vedete entrambe le funzioni sono corredate da una sola riga di codice, il cui scopo è semplicemente quello di cambiare lo sfondo dei relativi SPAN.
