Lo script che presentiamo offre un bel menù dinamico, utile soprattutto a chi ha molti collegamenti da inserire. Per ogni categoria principale, infatti, sarà possibile visualizzare i relativi link in un'area di testo sottostante. In questo modo eviteremo di avere lunghi menù laterali.
L'esempio si compone di 2 file:
- esempio.htm
- menu.js
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.
Tutte le modifiche sono da effettuare nel javascript esterno. Basterà aprire, con un qualsiasi editor, il file "menu.js" e mettersi al lavoro.
Vediamo quali sono le variabili che possiamo personalizzare:
hauteurcadre = 20;
il valore numerico indica l'altezza (in pixel) dell'area testo in cui saranno visualizzati i link appartenenti alle categorie
xmenu[0] = 'Html.it';
xmenu[1] = 'Freephp';
xmenu[2] = 'Forum';
xmenu[] è l'array che conterrà i nomi delle categorie principali. Come ormai sappiamo possiamo inserire un numero variabile di elementi; basterà ricordarsi di seguire la numerazione progressiva tra le parentesi quadre (il valore iniziale è sempre 0). L'eventuale prossima categoria sarà, quindi,
xmenu[3] = 'Quarta categorià;
Ogni link della rispettiva categoria dovrà essere inserito nello stesso modo, ovvero utilizzando gli array.
xlien[]
è il nome dell'array per i link. Prima di inserire i collegamenti relativi dovremo impostare gli array in questa maniera
xlien[0] = ''
xlien[1] = ''
xlien[2] = ''
In pratica, per ogni array xmenu[] creato (nel nostro caso sono 3) dovremo impostare lo stesso numero di array xlien[] con il primo valore uguale a ''
Fatto questo possiamo iniziare ad inserire le sottovoci. Per inserire un link nella relativa categoria basterà utilizzare l'indice degli array (il numero tra le parentesi).
Ad esempio, se volessimo mettere un collegamento nella prima categoria, utilizzeremmo il numero zero come valore tra le parentesi. Credo che l'esempio pratico sia molto più efficace di qualsiasi altra spiegazione.
xlien[0] += '<a href="http://www.hmtl.it"
CLASS=menudyn3>Homepage</a>';
xlien[0] += ' | '
xlien[0] += '<a href="https://www.html.it/guide.htm"
CLASS=menudyn3>Guide</a>';
xlien[1] += '<a href="http://freephp.html.it"
CLASS=menudyn3>Homepage</a>';
xlien[1] += ' | '
xlien[1] += '<a href="http://freephp.html.it/guide/lezioni.asp?idguida=7"
CLASS=menudyn3>Guida Base</a>';
xlien[1] += ' | '
xlien[1] += '<a href="http://freephp.html.it/script/index.asp"
CLASS=menudyn3>Raccolta Script</a>';
xlien[2] += '<a href="http://forum.html.it"
CLASS=menudyn3>Homepage</a>';
xlien[2] += ' | '
xlien[2] += '<a
href="http://forum.html.it/forum/forumdisplay.php?s=&forumid=1" CLASS=menudyn3>Forum Html</a>';
xlien[2] += ' | '
xlien[2] += '<a
href="http://forum.html.it/forum/forumdisplay.php?s=&forumid=2" CLASS=menudyn3>Forum Flash</a>';
Come vedete, il codice è molto semplice: tutti i link (ma anche i separatori |) sono racchiusi dentro degli array che hanno come indice il numero della categoria a cui appartengono. Basterà riprodurre o tagliare questa struttura per popolare il menù in base alle nostre esigenze.
Per personalizzare il colore dei link dovremo modificare i valori di questo CSS presente nel codice
document.write('<style type="text/css">nA.menudyn3 {color:#f0f0f0; text-decoration:none;}nA:hover.menudyn3 {color:#003399;text-decoration:none;}n</style>');
Per modificare i colori della tabella dobbiamo, invece, cercare la funzione chiamata
colorIt()
Basterà trovare una riga che inizia con "function colorIt(tditem)..." e modificare i colori di sfondo.
Se, infine, desideriamo cambiare anche il tipo di font nell'area testo basterà modificare il codice presente all'interno della funzione MajMenu()
function MajMenu(menu)
....
A questo punto salviamo il nostro lavoro e apriamo la pagina in cui vogliamo inserire il menù. Nel punto desiderato del documento (ad esempio dentro una cella di una tabella) basterà incollare questo richiamo al javascript esterno:
<script language="javascript" src="menu.js"></script>
