Salve ho creato un sottomenu a tendina che dovrebbe comparire e scomparire quando ci si clicca su, solo che non funziona.
Vi posto il codice html:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr">
<head>
<title>Sottomenu a tendina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<style type="text/css">
/*<![CDATA[*/
<!--
body{
background:#FFF;
color:#000;
font:80% Verdana,Geneva,Arial,Helvetica,sans-serif;
}
.menuNavigazione{
margin:0;
padding:0;
width:200px;
list-style:none;
}
.menuNavigazione a{
display:block;
text-decoration:none;
margin:2px 0;
padding:5px;
border:1px solid #000;
background:#EEE;
color:#000;
}
.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{
padding:4px;
border-width:2px;
}
.menuNavigazione ul{
margin:0;
padding:0;
list-style:none;
}
.menuNavigazione .voceCorrente a{
margin:0;
border-width:2px;
padding:4px;
font-weight:bold;
}
.menuNavigazione .voceCorrente ul a{
border-top:none;
margin:0 7px;
font-weight:normal;
font-size:80%;
}
.menuNavigazione .voceCorrente ul a:hover,
.menuNavigazione .voceCorrente ul a:focus,
.menuNavigazione .voceCorrente ul a:active{
background:#FFF;
color:#000;
} -->
/*]]>*/
</style>
<script type="text/javascript" src="expandingMenu.js"></script>
</head>
<body>
<ul class="menuNavigazione" id="menu">
[*]Prima Voce
<li class="voceCorrente">Seconda Voce
<ul>
[*]Prima Sotto Voce
[*]Seconda Sotto Voce
[*]Terza Sotto Voce
[/list]
[*]Terza Voce
[*]Quarta Voce
[*]Quinta Voce[/list]
</body>
</html>
e il codice javascipt che dovrebbe gestire il tutto:
codice:
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
Per favore datemi una mano.
Grazie.