Lo script di questo articolo è un bel menù con effetto dissolvenza sulle celle,
compatibile con tutti i browsers.
Tutto il menù verrà costruito dentro una normale tabella html a cui verranno
aggiunti i richiami al codice javascript. Nulla di complicato e infinite
possibilità di personalizzazione.
Per prima cosa vanno impostati i fogli di stile che gestiscono l'aspetto
grafico del menù, colori di sfondo e links.
Il codice va inserito fra i tags <head> della pagina:
<!-- INIZIO CODICE -->
<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>
<!-- FINE CODICE -->
L'utente può provare a modificare i parametri delle singole classi
per trovare l'accostamento cromatico che più gli piace.
Poichè il codice javascript è piuttosto lungo, lo salveremo in un file js
esterno che chiameremo fader.js, ecco il codice:
<!-- INIZIO CODICE -->
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);"); }
}
}
<!-- FINE CODICE -->
Teoricamente il codice non andrebbe modificato ma, se decidiamo di
utilizzare lo script anche con Netscape, è 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.
Vediamoli nel dettaglio:
il valore di
deve essere uguale a
|
background-color: #5A7EA5; (nome classe nel css: .navbarMain) |
il valore di
|
mainBgColorHover = "#7A9EC5"; |
deve essere uguale a
|
background-color: #7A9EC5; (nome classe nel css: .navbarMainHover) |
il valore di
deve essere uguale a
|
background-color: #ffffff; (nome classe nel css: .navbarSub) |
infine va detto che la stringa:
|
subBgColorHover = "#D0D7E9"; |
è valida solo per Netscape e serve per determinare
il colore di sfondo (hover) delle celle di un submenù.
Fatto questo, sempre fra i tags <head> della pagina, inseriamo il richiamo html
al file javascript:
<!-- INIZIO CODICE -->
<script language="JavaScript" src="fader.js">
</script>
<!-- FINE CODICE -->
Non resta che inserire nel <body> il codice della tabella:
<!-- INIZIO CODICE -->
<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://oceano.altervista.org" class="linkMain">Oceano</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://oceano.altervista.org/modules.php?name=Gallery" class="linkSub">Gallery</a></layer></ilayer></td>
</tr>
</table>
<!-- FINE CODICE -->
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://oceano.altervista.org" class="linkMain">Oceano</a>
</layer></ilayer>
</td> |
L'unica cosa da dover modificare è il link e il testo all'interno della cella stessa (in questo caso http://oceano.altervista.org e Oceano)
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://oceano.altervista.org/modules.php?name=Gallery" class="linkSub">Gallery</a>
</layer>
</ilayer>
</td> |
Anche in questo caso modifichiamo il link e il testo all'interno della cella (http://oceano.altervista.org/modules.php?name=Gallery e Gallery)
Altre modifiche non sono necessarie.
Fader menu
