Lo script che presentiamo ci permette di creare un menù espandibile all'interno di una semplice tabella html. La prima caratteristicà dello script, quindi, è la leggerezza e la velocità di caricamento che, però, non escludono un buon impatto grafico dato che potremo personalizzare i colori delle celle a piacimento.
Il codice è perfettamente compatibile con Internet Explorer e con Netscape 6; con NN 4.x, invece, il menù verrà visualizzato già espanso.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo, nel punto del <body> in cui vogliamo appaia il menù, questa semplice stringa:
<DIV ID=mv2></DIV>
Lo script vero e proprio va inserito nel <body> (assolutamente dopo la stringa <DIV ID=mv2></DIV>) e non tra gli <head> come spesso accade:
<script type="text/javascript" language="javascript">
document.write('<style type="text/css">na.mv2style {color:#ffffff;text-decoration:none;}na:hover.mv2style {color:#CC0000;text-decoration:underlined;}n</style>');
mv2_menu = new Array();
mv2_lien = new Array();
mv2_menu[0] = '<strong>Html.it</strong>';
mv2_menu[1] = '<strong>Linguaggi web</strong>';
mv2_menu[2] = '<strong>Risorse</strong>';
mv2_menu[3] = '<strong>Forum</strong>';
mv2_lien[0] = '<a href="http://www.html.it" CLASS=mv2style target="_self"> .
Home page</a>
'
mv2_lien[1] = '<a href="http://freephp.html.it" CLASS=mv2style
target="_self"> . Freephp</a>
'
mv2_lien[2] = '<a href="https://www.html.it/jscript/index.html" CLASS=mv2style target="_self"> . Javascript</a>
'
mv2_lien[3] = '<a href="http://forum.html.it/forum/forumdisplay.php?s=&forumid=39" CLASS=mv2style> . Forum Php</a>
';
mv2_lien[1] += '<a href="http://freeasp.html.it" CLASS=mv2style target="_self"> . Freeasp</a>
';
mv2_lien[1] += '<a href="http://cgipoint.html.it/" CLASS=mv2style target="_self"> . Cgipoint</a>
';
mv2_lien[2] += '<a href="https://www.html.it/dynamic/index.html" CLASS=mv2style target="_self"> . Dhtml</a>
';
mv2_lien[2] += '<a href="https://www.html.it/java/index.html" CLASS=mv2style target="_self"> . Applet Java</a>
';
mv2_lien[3] += '<a href="http://forum.html.it/forum/forumdisplay.php?s=&forumid=1" CLASS=mv2style target="_self"> . Forum Html</a>
';
mv2_lien[3] += '<a href="http://forum.html.it/forum/forumdisplay.php?s=&forumid=7" CLASS=mv2style> . Discussioni Off Topic</a>
';
mv2_pos = -1;
function mv2_menu_draw()
{
mv2_aff = "<table class="tabella" border="0" BGCOLOR=#ffffff CELLPADDING=0 CELLSPACING=0 width=200><TR><td><table class="tabella" border="0" CELLPADDING=3 CELLSPACING=1 width=100%>";
for(a=0;a<mv2_menu.length;a++)
{
if(mv2_pos == a || !document.getElementById)
bgcolor = "#006699";
else
bgcolor = "#000000";
if(document.getElementById)
mv2_aff += "<TR><td BGCOLOR="+bgcolor+"><a href="#" onMouseOver="mv2_pos="+a+";mv2_menu_draw()" CLASS=mv2style><font face="Verdana" size=2>"+mv2_menu[a]+"</font></a></td></TR>";
else
mv2_aff += "<TR><td BGCOLOR="+bgcolor+"><font face="Verdana" size=2 COLOR=#000000>"+mv2_menu[a]+"</font></td></TR>"
if(mv2_pos == a || !document.getElementById)
mv2_aff += "<TR><td BGCOLOR="+bgcolor+"><font face="Verdana" size=1>"+mv2_lien[a]+"</font></td></TR>";
}
mv2_aff += "</table></td></TR></table>";
if(document.getElementById)
document.getElementById("mv2").innerHTML = mv2_aff;
else
document.write(mv2_aff);
}
mv2_menu_draw();
</script>
Vediamo come poter inserire i link all'interno del menù. Innanzitutto dobbiamo stabilire quante saranno le voci principali:
mv2_menu[0] = '<b>Html.it';
mv2_menu[1] = '<b>Linguaggi web';
mv2_menu[2] = '<b>Risorsè;
mv2_menu[3] = '<b>Forum';
In questo caso, utilizzando degli array con numerazione progressiva, abbiamo inserito 4 voci. Nel caso volessimo aggiungerne altre dovremo scrivere una nuova stringa strutturata così:
mv2_menu[N] = 'testo';
"N" rappresenta il numero progressivo; "testo" (che va inserito tra due apici '...') rappresenta la nuova voce del menù. Potete notare come ogni array possa contenere anche codice html.
Lo stesso meccanismo degli array viene utilizzato per assegnare, ad ogni voce principale, un sottomenù linkabile. Ad esempio, per creare una nuova sottodirectory, per le 4 voci creata in precedenza, scriveremo 4 array così strutturati:
mv2_lien[0] = '<a href="http://www.html.it" CLASS=mv2style target="_self"> . Home page</a>
'
mv2_lien[1] = '<a href="http://freephp.html.it" CLASS=mv2style target="_self"> . Freephp</a>
'
mv2_lien[2] = '<a href="https://www.html.it/jscript/index.html" CLASS=mv2style target="_self"> . Javascript</a>
'
mv2_lien[3] = '<a href="http://forum.html.it/forum/forumdisplay.php?s=&forumid=39" CLASS=mv2style target="_self"> . Forum Php</a>
';
Ogni nuovo link contiene, tra le parentesi quadrate del proprio array, il numero corrispondente alla voce principale a cui verrà assegnato.
Nel caso in cui si voglia aggiungere altri sottomenù alle voci principali bisognerà inserire nuovi array simili a quelli analizzati poco fa ma con la variante di un segno più ( + ) prima dell'uguale ( = ).
Penso che un esempio pratico sia più esplicativo; supponiamo di voler assegnare un nuovo sottomenù, oltre a quello già esistente (Home Page), alla prima voce (Html.it); inseriremo questo array (notare il segno +):
mv2_lien[0] += 'secondo sottomenù appartenente alla prima vocè;
Il resto delle modifiche riguarda il semplice codice per cambiare l'aspetto della tabella.
document.write('<STYLE TYPE="text/css">na.mv2style {color:#ffffff;text-decoration:none;}na:hover.mv2style {color:#CC0000;text-decoration:underlined;}n</STYLE>');
con questa stringa vengono stampati i CSS per la tabella
mv2_aff = "<table border="0" bgcolor=#ffffff cellpadding=0 cellspacing=0 width=200><tr><td><table border="0" cellpadding=3 cellspacing=1 width=100%>
le caratteristiche della tabella contenente il menù
bgcolor = "#006699";
else
bgcolor = "#000000";
rispettivamente: il colore delle celle quando il menù è aperto; il colore delle celle a menù chiuso
<FONT face="Verdana" size=2 COLOR=#000000>
ulteriore personalizzazione può essere fatta per il font da utilizzare. In questo caso viene usato il Verdana con colore nero
Dato che lo script è particolarmente lungo penso sia una buona idea mettere tutto il codice javascript in un file esterno con estensione .js (ricordiamoci di levare i tag <script language="javascript"> e </script>).
A questo punto, dopo la stringa <DIV ID=mv2></DIV>, basterà inserire il richiamo al file esterno:
<script language="javascript" SRC="nome_del_file.js"></script>
