Qui sotto c'è lo script di una pagina web con un menu piuttosto interessante. Teoricamente (e sottolineo teoricamente) l'autore dello script javascript (da un libro sui css) dice che scrivendo una lista menu ben strutturata xhtml e configurando il javascript nella sola variabile
menuClassName si dovrebbe ottenere un menu con sottovoci a scomparsa... la cosa è interessante perche sia nel caso in cui il browser non supporti i css o nel caso in cui javascript non sia supportato, il menu sarebbe comunque fruibile (e accessibile) perchè totalmente aperto.
:quote:
il problema è che non funziona:dipser:
ho ricontrollato più volte il codice nel libro, tutto coincide.. io non capisco praticamete niente di JS.. qualcuno può aiutarmi a capire cosa c'è che non va?
Grazie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*MENU*/
.menuNavigazione{
margin:0;
padding:0;
width:200px;
list-style:none;
border-top:1px solid #009;
}
.menuNavigazione li{
position:relative;
}
/*sottomenu*/
.menuNavigazione ul{
list-style:none;
padding:0;
border-top:1px solid;
}
/*sottomenu senza JS*/
.menuNavigazione ul{
margin:0 0 0 15px;
}
/*sottomenu con JS
n off*/
.menuNavigazione ul.subMenu-off{
position:absolute;
visibility:hidden;
height:0;
overflow:hidden;
}
.menuNavigazione ul.subMenu-on{
margin:0;
width:200px;
position:absolute;
top:-1px;
left:199px;
}
/*collegamenti*/
.menuNavigazione a{
display:block;
text-decoration:none;
padding:2px 10px;
}
.menuNavigazione a{
border-right:1px solid #000;
border-bottom:1px solid #000;
border-lef:10px solid #000;
}
/*colori*/
.menuNavigazione a:link,
.menuNavigazione a:visited{
background:#fbeffb;
color:#000;
}
.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{
background:#FFF;
color:#009;
}
/*voci con sottomenu*/
.menuNavigazione.subMenu-on a.continua:link,
.menuNavigazione.subMenu-on a.continua:visited,
.menuNavigazione.subMenu-off a.continua:link,
.menuNavigazione.subMenu-off a.continua:visited{
background-image:url(continua.gif);
background-position:right center;
background-repeat:no-repeat;
}
</style>
<!--[if IE]>
<style type="text/css">
.menuNavigazione li{
display:inline;
}
.menuNavigazione a{
height:0;
}
</style>
<![endif]-->
<script type="javascript" language="JavaScript">
<!--
/*config*/
menuClassName="menuNavigazione";
/*script*/
function closeSub(menu){
for (var i=0; i<menu.childNodes.length; i++)
if (menu.childNodes.nodeName.toLowerCase()=="li"){
li=menu.childNodes;
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";
}
/*onload*/
window.onload = function(e){
if (tags_ = document.getElementsByTagName('ul'))
for(i=0; i<tags_.length; i++)
if(tags_.className==menuClassName) closeSub(tags_);
if (tags_ = document.getElementsByTagName('ol'))
for(i=0; i<tags_.length; i++)
if(tags_.className==menuClassName) closeSub(tags_);
//--> }
</script>
</head>
<body>
<ul class="menuNavigazione">
<li><a href="#">Categoria 1</a></li>
<li><a href="#" class="continua">Categoria 2</a>
<ul>
<li><a href="#">Sottocategoria 1</a></li>
<li><a href="#">Sottocategoria 2</a></li>
<li><a href="#">Sottocategoria 3</a></li>
</ul>
</li>
<li><a href="#" class="continua">Categoria 3</a>
<ul>
<li><a href="#">Sottocategoria 1</a></li>
<li><a href="#">Sottocategoria 2</a></li>
<li><a href="#">Sottocategoria 3</a></li>
</ul>
</li>
<li><a href="#" class="continua">Categoria 4</a>
<ul>
<li><a href="#">Sottocategoria 1</a></li>
<li><a href="#">Sottocategoria 2</a></li>
<li><a href="#">Sottocategoria 3</a></li>
</ul>
</li>
</ul>
</body>
</html>
menuClassName si dovrebbe ottenere un menu con sottovoci a scomparsa... la cosa è interessante perche sia nel caso in cui il browser non supporti i css o nel caso in cui javascript non sia supportato, il menu sarebbe comunque fruibile (e accessibile) perchè totalmente aperto.
:quote:
il problema è che non funziona:dipser:
ho ricontrollato più volte il codice nel libro, tutto coincide.. io non capisco praticamete niente di JS.. qualcuno può aiutarmi a capire cosa c'è che non va?
Grazie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*MENU*/
.menuNavigazione{
margin:0;
padding:0;
width:200px;
list-style:none;
border-top:1px solid #009;
}
.menuNavigazione li{
position:relative;
}
/*sottomenu*/
.menuNavigazione ul{
list-style:none;
padding:0;
border-top:1px solid;
}
/*sottomenu senza JS*/
.menuNavigazione ul{
margin:0 0 0 15px;
}
/*sottomenu con JS
n off*/.menuNavigazione ul.subMenu-off{
position:absolute;
visibility:hidden;
height:0;
overflow:hidden;
}
.menuNavigazione ul.subMenu-on{
margin:0;
width:200px;
position:absolute;
top:-1px;
left:199px;
}
/*collegamenti*/
.menuNavigazione a{
display:block;
text-decoration:none;
padding:2px 10px;
}
.menuNavigazione a{
border-right:1px solid #000;
border-bottom:1px solid #000;
border-lef:10px solid #000;
}
/*colori*/
.menuNavigazione a:link,
.menuNavigazione a:visited{
background:#fbeffb;
color:#000;
}
.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{
background:#FFF;
color:#009;
}
/*voci con sottomenu*/
.menuNavigazione.subMenu-on a.continua:link,
.menuNavigazione.subMenu-on a.continua:visited,
.menuNavigazione.subMenu-off a.continua:link,
.menuNavigazione.subMenu-off a.continua:visited{
background-image:url(continua.gif);
background-position:right center;
background-repeat:no-repeat;
}
</style>
<!--[if IE]>
<style type="text/css">
.menuNavigazione li{
display:inline;
}
.menuNavigazione a{
height:0;
}
</style>
<![endif]-->
<script type="javascript" language="JavaScript">
<!--
/*config*/
menuClassName="menuNavigazione";
/*script*/
function closeSub(menu){
for (var i=0; i<menu.childNodes.length; i++)
if (menu.childNodes.nodeName.toLowerCase()=="li"){
li=menu.childNodes;
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";
}
/*onload*/
window.onload = function(e){
if (tags_ = document.getElementsByTagName('ul'))
for(i=0; i<tags_.length; i++)
if(tags_.className==menuClassName) closeSub(tags_);
if (tags_ = document.getElementsByTagName('ol'))
for(i=0; i<tags_.length; i++)
if(tags_.className==menuClassName) closeSub(tags_);
//--> }
</script>
</head>
<body>
<ul class="menuNavigazione">
<li><a href="#">Categoria 1</a></li>
<li><a href="#" class="continua">Categoria 2</a>
<ul>
<li><a href="#">Sottocategoria 1</a></li>
<li><a href="#">Sottocategoria 2</a></li>
<li><a href="#">Sottocategoria 3</a></li>
</ul>
</li>
<li><a href="#" class="continua">Categoria 3</a>
<ul>
<li><a href="#">Sottocategoria 1</a></li>
<li><a href="#">Sottocategoria 2</a></li>
<li><a href="#">Sottocategoria 3</a></li>
</ul>
</li>
<li><a href="#" class="continua">Categoria 4</a>
<ul>
<li><a href="#">Sottocategoria 1</a></li>
<li><a href="#">Sottocategoria 2</a></li>
<li><a href="#">Sottocategoria 3</a></li>
</ul>
</li>
</ul>
</body>
</html>
