homepage Welcome to WebmasterWorld Guest from 50.17.21.7
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
create tree like menu
dhtml




msg:3025347
 5:11 am on Jul 28, 2006 (gmt 0)

Hi all,

Does anybody use tree like menu to navigate your website? I mean the menu like this:
<snip>

How can I make that menu?

[edited by: engine at 2:25 pm (utc) on July 31, 2006]
[edit reason]
[1][edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]
[/edit][/1]

 

limbo




msg:3028652
 12:02 pm on Jul 31, 2006 (gmt 0)

Hi Dhtml

You can get that effect to work using javascript/CSS & list items. This way it degrades gracefully for users without JS enabled.

A similar one I used a while back (cannot remember the source for this - I don't take the credit)- snippet :

javascript
function initMenus() {
if (!document.getElementsByTagName) return;

var aMenus = document.getElementsByTagName("LI");
for (var i = 0; i < aMenus.length; i++) {
var mclass = aMenus[i].className;
if (mclass.indexOf("treenode") > -1) {
var submenu = aMenus[i].childNodes;
for (var j = 0; j < submenu.length; j++) {
if (submenu[j].tagName == "A") {

submenu[j].onclick = function() {
var node = this.nextSibling;

while (1) {
if (node!= null) {
if (node.tagName == "UL") {
var d = (node.style.display == "none")
node.style.display = (d)? "block" : "none";
this.className = (d)? "treeopen" : "treeclosed";
return false;
}
node = node.nextSibling;
} else {
return false;
}
}
return false;
}

submenu[j].className = (mclass.indexOf("open") > -1)? "treeopen" : "treeclosed";
}

if (submenu[j].tagName == "UL")
submenu[j].style.display = (mclass.indexOf("open") > -1)? "block" : "none";
}
}
}
}

window.onload = initMenus;

CSS
.treemenu {margin:0;padding:0;list-style:none;border:0;}
.treemenu ul {list-style:none;margin:10px 0 0 0;padding:10px;}
.treemenu li {display:block;background:none;margin:0;padding:0;background:#fff;}
.treemenu a {display:block;text-decoration:none;margin:0;padding:0 0 0 19px;}
.treemenu .treeopen {background:url(icon-minus.gif) no-repeat left;}
.treemenu .treeclosed {background:url(icon-plus.gif) no-repeat left;}
.treenode {margin:0;padding:0;}

html
<ul class="treemenu">
<li class="treenode"><a class="treeopen" href="#">Main link</a>
<ul style="display:block;">
<li class="treenode">sublink</li>
</ul>
</li>
</ul>

Cheers, Limbo

dhtml




msg:3031043
 5:31 am on Aug 2, 2006 (gmt 0)

Thank you! I will give it a try.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved