Adding an additional submenu to a collapsible/expandable menu

Question posted by: Jonathan (Guest) on January 5th, 2007 05:05 PM

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:


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]; i++)
{
if (subs[i].tagName=='LI')
{
hs = subs[i].getElementsByTagName('B');
heading = hs[0];
ss = subs[i].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]; i++)
{
if (subs[i].tagName=='LI')
{
hs = subs[i].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]; i++)
{
node = bs[i];
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>
************************************************** ************************************************** *****

Quote | Subscribe