Lo script che presentiamo è un bel menù con effetto fader (dissolvenza) sulle celle. La particolarità, innanzitutto, sta nel fatto che è compatibile con i tre maggiori browser in circolazione: Explorer, Netscape 4.x e Netscape 6.x (da notare, però, che con il vecchio NN l'effetto è leggermente diverso ma non dà errore).
Tutto il menù verrà costruito dentro una normale tabella html a cui verranno aggiunti i richiami al codice javascript; quindi nulla di complicato e infinite possibilità di personalizzazione.
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.
Per prima cosa impostiamo i fogli di stile che gestiscono l'aspetto grafico del menù (i colori di sfondo, i link).
Tra i tag <head> inseriamo:
<style>
.navbarMainHover{
background-color: #7A9EC5;
border: 1px solid #000000;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
}
.navbarMain {
background-color: #5A7EA5;
border: 1px solid #000000;
border-left: 1px solid #999999;
border-top: 1px solid #999999;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
}
.linkMain {
color: white;
font-family: Verdana, Arial, Helvetica;
font-size: 8pt;
font-weight: bold;
}
.linkSub {
color: black;
font-family: Verdana, Arial, Helvetica;
font-size: 8pt;
}
.navbarSubHover {
background-color: #D5DAE9;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #000000;
border-left: 1px solid #999999;
border-top: 1px solid #999999;
}
.navbarSub {
background-color: #ffffff;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #ffffff;
}
</style>
La cosa migliore è iniziare a modificare i parametri delle singole classi per trovare l'accostamento cromatico che più ci piace.
Fatto questo inseriamo il codice vero e proprio sempre tra i tag <head> della pagina:
<script type="text/javascript" language="javascript">
mainBgColor = "#5A7EA5";
mainBgColorHover = "#7A9EC5";
subBgColor = "#ffffff";
subBgColorHover = "#D0D7E9";
mainStyle = "navbarMain";
mainStyleHover = "navbarMainHover";
subStyle = "navbarSub";
subStyleHover = "navbarSubHover";
function clk(obj){
if (document.all && obj.children.tags("A").length> 0 &&
obj.children.tags("a")[0].href)
obj.children.tags("A")[0].click();
else if (!document.all) {
if (obj.document && obj.document.links[0]) location.href =
obj.document.links[0].href;
else if (obj.getElementsByTagName("a")){
var links = obj.getElementsByTagName("a");
if (links[0])
location.href = links[0].href;
}
}
}
function sOver(obj){
if (obj.className){
obj.className = subStyleHover;
if (obj.children){
if (obj.children.tags("A").length> 0 && obj.children.tags("A")[0].href !=
""){
obj.style.cursor = "hand";
var link = obj.children.tags("A")[0];
status = link.href;
if (!obj.title) obj.title =
link.href.split("/")[link.href.split("/").length - 1];
}
else status = obj.innerText;
}
else if (obj.getElementsByTagName("a")) status =
obj.getElementsByTagName("a")[0].href;
}
else {
obj.bgColor = subBgColorHover;
if (obj.document.links[0]) status = obj.document.links[0].href;
}
}
function sOut(obj){
status = "";
if (obj.className){
obj.style.cursor = "";
obj.className = subStyle;
}
else obj.bgColor = subBgColor;
}
function mOver(obj){
if (obj.className){
obj.className = mainStyleHover;
if (obj.children){
if (obj.children.tags("A").length> 0 && obj.children.tags("A")[0].href !=
""){
obj.style.cursor = "hand";
var link = obj.children.tags("A")[0];
status = link.href;
if (!obj.title) obj.title =
link.href.split("/")[link.href.split("/").length - 1];
}
else status = obj.innerText;
}
else if (obj.getElementsByTagName("a")) status =
obj.getElementsByTagName("a")[0].href;
}
else {
obj.bgColor = mainBgColorHover;
if (obj.document.links[0]) status = obj.document.links[0].href;
}
}
function mOut(obj){
status = "";
if (obj.className){
obj.style.cursor = "";
obj.className = mainStyle;
}
else obj.bgColor = mainBgColor;
}
function cap(obj){
if (document.layers){
obj.captureEvents(Event.MOUSEUP);
obj.captureEvents(Event.MOUSEOVER);
obj.captureEvents(Event.MOUSEOUT);
obj.onmouseup = function (e) { clk(obj); }
obj.onmouseover = function (e) { eval(obj.name.substring(0,1).toLowerCase() +
"Over(obj);"); }
obj.onmouseout = function (e) {eval(obj.name.substring(0,1).toLowerCase() +
"Out(obj);"); }
}
}
</script>
Come suggerisco sempre, quando ci si trova di fronte un codice particolarmente lungo, ricordo che è una buona idea (per la "pulizia" della pagina) utilizzare un codice javascript esterno con estensione .js
Teoricamente il codice non andrebbe modificato ma, se decidiamo di utilizzare lo script anche con Netscape 4.x, è necessario personalizzare 3 parametri:
mainBgColor = "#5A7EA5";
mainBgColorHover = "#7A9EC5";
subBgColor = "#ffffff";
Semplicemente i valori esadecimali di queste 3 stringhe devono essere uguali al rispettivo valore contenuto nelle classi del foglio di stile. Vediamo nel dettaglio:
Il valore di
mainBgColor = "#5A7EA5";
deve essere uguale a
background-color: #5A7EA5; (nome classe nel css: .navbarMain)
mainBgColorHover = "#7A9EC5";
deve essere uguale a
background-color: #7A9EC5; (nome classe nel css: .navbarMainHover)
subBgColor = "#ffffff";
deve essere uguale a
background-color: #ffffff; (nome classe nel css: .navbarSub)
subBgColorHover = "#D0D7E9";
questa stringa invece è valida solo per Netscape e serve per determinare il colore di sfondo (hover) delle celle di un submenù
Non resta che vedere come è strutturato il codice della tabella. Analizziamo quella usate per l'esempio pratico:
<table cellpadding="0" cellspacing="2" border="0" width="170">
<tr>
<td class="navbarMain" onmouseover="mOver(this);" onmouseout="mOut(this);"
onclick="clk(this)">
<ilayer><layer id="Main" width="100%" onload="cap(this)"><a
href="http://freephp.html.it" class="linkMain">Freephp.html.it</a></layer></ilayer></td>
</tr>
<tr>
<td class="navbarSub" onmouseover="sOver(this);" onmouseout="sOut(this);"
onclick="clk(this)">
<ilayer><layer id="Sub" width="100%" onload="cap(this)"><a
href="http://freephp.html.it/programmatori/index.asp" class="linkSub">Sezione Programmatori</a></layer></ilayer></td>
</tr>
</table>
Come si può notare da un'analisi superficiale il codice è proprio quello di una comune tabella in html; la differenza viene fatta dalle classi css e dai richiami al codice javascript inseriti nelle singole celle.
Vediamo l'esempio di una cella che contiene un livello "MAIN" del menù:
<td class="navbarMain" onmouseover="mOver(this);" onmouseout="mOut(this);" onclick="clk(this)">
<ilayer>
<layer id="Main" width="100%" onload="cap(this)"><a href="http://freephp.html.it" class="linkMain">Freephp.html.it</a>
</layer></ilayer>
</td>
L'unica cosa da dover modificare è il link e il testo all'interno della cella stessa (in questo caso http://freephp.html.it e Freephp.html.it)
Per inserire, invece, un livello "SUB" (con caratteristiche grafiche diverse quindi) usiamo questo codice:
<td class="navbarSub" onmouseover="sOver(this);" onmouseout="sOut(this);" onclick="clk(this)">
<ilayer><layer id="Sub" width="100%" onload="cap(this)"><a href="http://freephp.html.it/programmatori/index.asp" class="linkSub">Sezione Programmatori</a>
</layer>
</ilayer>
</td>
Anche in questo caso modifichiamo il link e il testo all'interno della cella (http://freephp.html.it/programmatori/index.asp e Sezione Programmatori)
Altre modifiche non sono necessarie.
