View Full Version : interesting menu but I'm not able to access the proper nodes, please help
Hi. I'm trying to modify a script I found for a dynamic menu. http://www.blazenewmedia.com/articles/creating-a-dynamic-navigation-menu
To do what the last poster in that thread asked about. I think what I need is to add a function that detects the state of sibling nodes when a child node is clicked and, if a sibling is 'open', closes that menu before opening itself. In the same way that only one of the 1st childnodes can be in an open state at a time, I want to make it so only one of the 2nd child nodes can be open. Only I can't figure out how to do it and its driving me nuts. So I thought perhaps someone here might be willing to attempt it and, more importantly, explain what they're doing. I'm sorry if this is the wrong place for this sort of question. Thank you for your time.
-Grod
To make it simpler, these are the current functions:
function collapseMenu(node) {
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
if (!node) node = document.getElementById("menu");
if (node.childNodes.length > 0) {
for (var i=0; i<node.childNodes.length; i++) {
var child = node.childNodes[i];
if (child.nodeName == "UL") {
child.style.display = "none";
}
collapseMenu(child);
}
}
}
function prepareMenu() {
if (!document.getElementById || !document.getElementsByTagName) return false;
if (!document.getElementById("menu")) return false;
var links = document.getElementById("menu").getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
links[i].onclick = function() {
toggleMenu(this.parentNode.getElementsByTagName("UL")[0], this.href);
return false;
}
}
}
function toggleMenu(node, link) {
if (!document.getElementById) return false;
if (!link) return false;
if (!node) location.href = link.href;
// Collapse all nodes, and only show clicked node (when clicking top level of menu)
if (node.parentNode.parentNode.id == "menu") {
hideTopLevels();
}
if (node.style.display == "") {
Effect.BlindUp(node, {duration: 0.2});
} else {
Effect.BlindDown(node, {duration: 0.2});
}
}
function hideTopLevels() {
if (!document.getElementById) return false;
if (!(node = document.getElementById("menu"))) return false;
if (node.childNodes.length > 0) {
for (var i=0; i<node.childNodes.length; i++) {
var child = node.childNodes[i];
for(var j=0; j<child.childNodes.length; j++) {
var grandchild = child.childNodes[j];
if (grandchild.nodeName == "UL") {
if (grandchild.style.display == '') {
Effect.BlindUp(grandchild, {duration: 0});
}
}
}
}
}
}
And the menus look like this:
<ul id="menu">
<li><a href="#">Category1</a><ul>
<li><a href="#">Category1 subcategory1</a><ul>
<li><a href="#">Cat1 Sub1 Item1</a></li>
<li><a href="#">Cat1 Sub1 Item2</a></li>
<li><a href="#">Cat1 Sub1 Item3</a></li>
</ul>
</li>
<li><a href="#">Category1 subcategory2</a><ul>
<li>Cat1 Sub2 Item1 a link</li>
<li>Cat1 Sub2 Item2 a link</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Category2</a><ul>
<li><a href="#">Category2 Subcategory1</a><ul>
<li>Cat2 Sub1 Item1 a link</li>
<li>Cat2 Sub1 Item2 a link</li>
</ul>
</li>
<li><a href="#">Category2 Subcategory2</a><ul>
<li>Cat2 Sub2 Item1 a link</li>
</ul>
</li>
</ul>
</li>
</ul>
And the question is, how to ensure that if Cat1 Sub2 is open, Cat1 Sub1 is closed?
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.