471,338 Members | 863 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,338 software developers and data experts.

Adding new level to simple "tree" menu

http://dynamicdrive.com/dynamicindex1/switchmenu.htm

I want to add a second level menu item to the existing design.
Currently only one level is possible.

Item 1
......link
......link
item 2
item 3
item 4

I want to show....

item 1
.....item 1a
.....item 1b
.....item 1c
.........link
.........link
item 2

So that when item 1a is clicked, only those items in that division are
collapsed.

I am assuming I can simply add a new variable, say "var item1" then copy the
script for the changes, and change "masterdiv" to "item1".

Or if anyone has a link to a similar layout with multiple layers I'll take a
look at it.

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsBy TagName("span");
//DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
Jul 23 '05 #1
1 2635
Richard wrote:
http://dynamicdrive.com/dynamicindex1/switchmenu.htm I want to add a second level menu item to the existing design.
Currently only one level is possible. Item 1
.....link
.....link
item 2
item 3
item 4 I want to show.... item 1
....item 1a
....item 1b
....item 1c
........link
........link
item 2


Ok so my first attempt went so so.
When page is first opened it shows.....

item 1
.....item 1a
.........link
item 2
item 3

When link is clicked on I get...

item 1
......item 1 a
item 2
item 3

When item 1a is clicked, the original tree shows and nothing else happens
anywhere.
So what do I need to do to correct so I get what I want?

My changes are below.
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsBy TagName("span");
//DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}

var item1 =
document.getElementById("master2").getElementsByTa gName("span");
//DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<item1.length; i++){
if (item1[i].className=="submenu2") //DynamicDrive.com change
item1[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
} // end of function
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Jo | last post: by
6 posts views Thread by Dennis Allen | last post: by
2 posts views Thread by Angelos | last post: by
18 posts views Thread by Andromeda | last post: by
reply views Thread by Tree menu using XML | last post: by
3 posts views Thread by lejason | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.