Hi,
I would like to have the following collapsible menu (with different levels):
I have a javascript that I have been using but if works for 2 levels and I need 3 levels.... I am sure it is not that difficult but I simply don't know how to do it. When I try something it never works.
Could you help me modify my script?
Thanks
Here is my script:
I would like to have the following collapsible menu (with different levels):
I have a javascript that I have been using but if works for 2 levels and I need 3 levels.... I am sure it is not that difficult but I simply don't know how to do it. When I try something it never works.
Could you help me modify my script?
Thanks
Here is my script:
Code:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
<!--
#menu {
position:relative;
font-family: Arial, Helvetica, sans-serif;
width:400px;
}
-->
</style>
<%@ include file="javascriptLib.html" %>
<script language="JavaScript" type="text/JavaScript">
<!--- oculta el script para navegadores antiguos
var origValue=null;
var fieldIndex=null;
if (self.location != top.location)
{
// top.location = self.location;
}
subcol='white';//El bgcolor de los sub-enlaces
indent=20;//La indentacion a la izquierda en pixels
function coll()
{
var dd=document.getElementById('menu').getElementsByTagName('div');
for (var i=1;i<dd.length;i=i+2)
{
dd[i].style.position='relative';
dd[i].style.display='none';
dd[i].style.backgroundColor=subcol;
dd[i].style.left=indent+'px';
}
}
function activ(w)
{
var d=w.parentNode.getElementsByTagName('div')[0];
if(d.style.display=='none')
{
coll();d.style.display='inline';
}
else
{
d.style.display='none';
}
}
onload=coll();
// end hiding from old browsers -->
</script>
</head>
<body onload=coll()>
<!-- Menu -->
<div id="menu" style="width:100%; margin:auto;">
<bl>
<div>
<li><a href="#" id="L1" onclick="activ(this)">TITLE1</a><br>
<div>
<a href="#" onclick="activ(this)">TITLE1.1</a><br>
</div>
</div>
<br>
<div>
<li>
<a href="#" onclick="activ(this)">TITLE2</a><br>
<div>
<a href="foo1.jsp">- TITLE2.1</a><br>
<a href="foo2.jsp">- TITLE2.2</a><br>
</div>
</div>
</bl>
</div>
<!-- END Menu -->
</body>
</html>