Questo è il codice del mio menù:
codice HTML:
<style type="text/css">
/*<![CDATA[*/
<!--
body{
background:#00FFFF;
color:#000;
font:80% Verdana,Geneva,Arial,Helvetica,sans-serif;
margin:0;
padding:10px;
}
/* MENU PRINCIPALE */
.menuNavigazione{
margin:0;
padding:0;
list-style:none;
height:2em;
border:1px solid #000;
}
.menuNavigazione li{
float:left;
width:10em; /* VOCI ORIZZONTALI */
position:relative;
}
.menuNavigazione a{
display:block;
height:2em;
line-height:2em;
padding:0 10px;
text-decoration:none;
border-right:1px solid;
text-align:center;
}
/* SOTTO MENU */
.menuNavigazione ul{
margin:0;
padding:0;
list-style:none;
width:17em;
}
.menuNavigazione ul li{
/*float:none;*/
width:17em; /* VOCI A COMPARSA */
}
.menuNavigazione ul a{
float:none;
display:block;
text-align:left;
height:1.8em;
line-height:1.8em;
border-right:1px solid #000;
border-left:10px solid #000;
border-bottom:1px solid #000;
}
/* MENU ON OFF */
.menuNavigazione ul,
.menuNavigazione ul.subMenu-off{
position:absolute;
/*visibility:hidden;*/
top:-10000em
}
/*.menuNavigazione ul.subMenu-on{
visibility:visible;
}*/
/* POSIZIONAMENTO DEL SOTTO MENU */
.menuNavigazione ul.subMenu-on{
position:absolute;/* primo livello di annidamento:menu a discesa */
top:2em;
left:-1px;
visibility:visible;
border-top:1px solid #000;
}
.menuNavigazione ul.subMenu-on ul.subMenu-on{
margin:0 0 0 -1px;/* livelli di annidamento superiori al primo:menu a comparsa laterale */
width:17em;
position:absolute;
top:-1px;
left:17em;
border-top:1px solid #000;
}
/* COLORI */
.menuNavigazione{
background:#EEE;
color:#000;
}
.menuNavigazione a{
background:#EEE;
color:#000;
}
/* EFFETTO ROLLOVER */
.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{
text-decoration:underline;
}
/* FRECCETTE */
.menuNavigazione a.continua{
background:url(immagini/continuaOrz.gif) #EEE center bottom no-repeat;
}
.menuNavigazione ul a.continua{
background:url(immagini/continua.gif) #EEE right center no-repeat;
}
-->
/*]]>*/
</style>
Funzione javascript:
/* CONFIG */
menuClassName = "menuNavigazione";
/* SCRIPT */
function closeSub(menu) {
for (var i=0; i<menu.childNodes.length; i++)
if (menu.childNodes[i].nodeName.toLowerCase()=="li") {
li = menu.childNodes[i];
li.onmouseover = li.onactivate = li.onfocus = function() { if (this.subMenu) this.subMenu.className = this.subMenu.className.replace(/subMenu-off/g,"subMenu-on") };
li.onmouseout = li.ondeactivate = li.onblur = function() { if (this.subMenu) closeSub(this.subMenu) };
for (j=0; j<li.childNodes.length; j++)
if (li.childNodes[j].nodeName.toLowerCase()=="ul" || li.childNodes[j].nodeName.toLowerCase()=="ol") closeSub(li.subMenu = li.childNodes[j]);
}
menu.className = menu.className.replace(/\s?subMenu-on/g,"")+" subMenu-off";
}
/* ON LOAD */
window.onload = function(e) {
if(tags_ = document.getElementsByTagName('ul'))
for(i=0; i<tags_.length; i++)
if (tags_[i].className==menuClassName) closeSub(tags_[i]);
if(tags_ = document.getElementsByTagName('ol'))
for(i=0; i<tags_.length; i++)
if (tags_[i].className==menuClassName) closeSub(tags_[i]);
}