|
|
Posted by Jonathan N. Little on 01/05/07 20:13
Toby Inkster wrote:
> Jonathan wrote:
>
>> Currently the code below allows the users to the drill down one level,
>> but I want it to be able to drill down an additional level. Any help
>> would be much appreciated.
>
> This looks startlingly like an old script of mine.
>
> I've not tried it with three nav levels, but I *believe* the key is to
> replace this:
>
> subs = menu.childNodes();
>
> with this:
>
> subs = menu.getElementsByTagName('LI');
>
I did up a demo for someone here recently that is a little more modern
for attaching the events and degrades to a fully expanded list if
JavaScript is disabled
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>template</title>
<style type="text/css">
#sm1,#sm2,#sm3 {
display: block;
}
</style>
<script type="text/javascript">
var buf='<style type="text/css">#sm1, #sm2, #sm3 { display: none;
}</style>';
document.write(buf);
</script>
<script type="text/javascript">
var menus=new Array('m1', 'm2', 'm3');
function toggle(e){
var me;
if(!e) var e=window.event;
if(e.target) me=e.target; // W3C
else if(e.srcElement) me=e.srcElement; // MSIE
if(me.nodeType == 3) me=me.parentNode; // Safari bug on elements
with TEXT
var id='s' + me.id;
var submenu=document.getElementById(id);
me.flag =! me.flag;
if(me.flag) submenu.style.display="block";
else submenu.style.display="none";
}
function initMenus(){
for( var i=0; i<menus.length; i++){
var menu=document.getElementById(menus[i]);
//alert('Init ' + menus[i] + ' which is ' + menu.tagName );
menu.flag=false;
if(menu.addEventListener){
menu.addEventListener('click', toggle, false);
}
else if(menu.attachEvent){ //MS IE support
menu.attachEvent('onclick', toggle);
}
}
}
// attach event after page loads
if( window.addEventListener ) {
window.addEventListener('load',initMenus,false); //legacy
} else if( document.addEventListener ) {
document.addEventListener('load',initMenus,false); //proper
} else if( window.attachEvent ) {
window.attachEvent("onload", initMenus); //IE only
}
</script>
</head>
<body>
<ul>
<li><a href="#" id="m1">Menu 1</a>
<ul id="sm1">
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
<li>Submenu 1.3</li>
</ul>
</li>
<li><a href="#" id="m2">Menu 2</a>
<ul id="sm2">
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
<li>Submenu 2.3</li>
<li>Submenu 2.4</li>
</ul>
</li>
<li><a href="#" id="m3">Menu 3</a>
<ul id="sm3">
<li>Submenu 3.1</li>
<li>Submenu 3.2</li>
</ul>
</li>
<ul>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|