Adding an additional submenu to a collapsible/expandable menu

J

Jonathan

Hello All,

I am in the process of creating a 2/3 level collapsible/exspanible menu
(called "nav") where users can click on a category and have the
submenus appear beneath it and so on (allow users to click on another
category and have that expand).

Example:
Corp Info

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.

Jonathan


Current Code:
****************************************************************************
<style type="text/css">
#nav {width: 170px; height: 500px}
#nav, #nav ul, #nav li {margin: 0; padding: 0; list-style: none;}
#nav li {clear: both;}
#nav li b {display: block; height: 1.2em; color: white; background:
#000033; width: 100%; border-top: thin solid #CCCCCC; padding: 4px;}
#nav li ul li a {display: block; height: 1.2em; width: 100%; padding:
4px; text-decoration: none; color: black; background: #ededed;
border-top: thin solid #CCCCCC;}
#nav li ul li {font-size: 92%; border: #000033; background: none;}
#nav li ul li a:hover {color: #000033; background: orange; }
</style>

<script type="text/javascript">

function setCookie (name, value, path, domain, secure, expires)
{
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}

function getCookie (name)
{
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1)
{
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1)
{
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}

function deleteCookie (name, path, domain)
{
if (getCookie(name))
{
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}


function addLoadEvent (func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}

</script>

<script type="text/javascript">

function menu_init ()
{
var menu = document.getElementById('nav');
var subs = menu.childNodes;

var j = 0;

for (var i=0 ; subs; i++)
{
if (subs.tagName=='LI')
{
hs = subs.getElementsByTagName('B');
heading = hs[0];
ss = subs.getElementsByTagName('UL');
submenu = ss[0];

j++;

heading.onclick = function () { menu_toggle(this); };

if (getCookie('menu'+j)=='1')
submenu.style.display = 'block';
else if (getCookie('menu'+j)=='0')
submenu.style.display = 'none';
else if (j==1)
submenu.style.display = 'block';
else
submenu.style.display = 'none';
}
}
}

function menu_toggle (heading)
{
var section = heading.parentNode;
var submenus = section.getElementsByTagName('UL');
var submenu = submenus[0];

if (submenu.style.display=='none')
submenu.style.display = 'block';
else
submenu.style.display = 'none';

var j = 0;

var menu = document.getElementById('nav');
var subs = menu.childNodes;
for (var i=0 ; subs; i++)
{
if (subs.tagName=='LI')
{
hs = subs.getElementsByTagName('B');
h = hs[0];
j++;

if (h==heading && submenu.style.display=='none')
setCookie('menu'+j, '0', '/');
else if (h==heading)
setCookie('menu'+j, '1', '/');
}
}


}

addLoadEvent(menu_init);

</script>

<!--[if IE 6]>
<script type="text/javascript">
// Suckerfish-like code to get B:hover working in IE 6.
function sucker_bold ()
{
bs = document.getElementById("nav").getElementsByTagName('B');
for (i=0; bs; i++)
{
node = bs;
node.onmouseover=function() { this.className+=" over"; }
node.onmouseout=function() { this.className=this.className.replace("
over", ""); }
}
}
addLoadEvent(sucker_bold);
</script>
<![endif]-->

<DIV id=leftNavContainer>
<ul id="nav">
<li>
<b>Corporate Information</b>
<ul>
<li><a href="#">Corporate
Overview</a></li>
<li><a href="#">Remote Sites</a></li>
</ul>
</li>
<li>
<b>Departments</b>
<!--<ul>-->
<ul>
<li><a href="#">Human
Resources</a></li>
<!-- <li><a href="">HR Staff</a></li>
<li><a href="">HR Forms</a></li>
<li><a href="">Benefits</a></li>
</ul>-->
<li><a
href="#">Accounting</a></li>
<!-- <ul>
<li><a href="">Accounting
Staff</a></li>
<li><a href="">Organizational
Chart</a></li>
</ul>-->
</ul>
</li>

</ul>
</div>
*********************************************************************************************************
 
T

Toby Inkster

Jonathan said:
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');
 
J

Jonathan N. Little

Toby said:
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);

//alert('Init ' + menus + ' 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>
 
J

Jonathan

Jonathan,

Is there anything special that I need to do to view your example? I
saved your code (as an new html file) and attempted to view it to no
avail. What would you suggest me to do to view your example. Thanks
for your assistance.

Jonathan
Toby said:
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);

//alert('Init ' + menus + ' 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>
 
J

Jonathan N. Little

Jonathan said:
Jonathan,

Is there anything special that I need to do to view your example? I
saved your code (as an new html file) and attempted to view it to no
avail. What would you suggest me to do to view your example. Thanks
for your assistance.

Nope only that your have JavaScript enabled and DOM1 browser. Mind you
this just just a strip down example. When first loaded should only see
the three main menu items. Click one on and the submenu should expand...
 
B

BootNic

[snip]watch for line wrap
[snip]watch for line wrap
[snip]
news: (e-mail address removed)
Jonathan,

Is there anything special that I need to do to view your example? I
saved your code (as an new html file) and attempted to view it to no
avail. What would you suggest me to do to view your example. Thanks
for your assistance.

Fix the line wrap and perhaps it will work for you.

--
BootNic Friday, January 05, 2007 11:54 PM

Optimism and humor are the grease and glue of life. Without both of
them we would never have survived our captivity.
*Philip Butler, Vietnam POW*
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top