<div>..</div> tags
* separating the navigation.
*
* To set up, first create the navigation, naming each <div>
* navigation layer with unique names. Then, your
* <a href=".."> tags just need to contain the
* appropriate onClick=".." line to manage
* the layer it is supposed to open/close.
*
* For example, the following will display a main navigational element with * two subnav items, each with it's own subnav. When "Main" is clicked, * the main subnav is displayed. When clicked again, the subnav should * disappear. *
* <a href="#" onClick="nav_click('nav',1); return false;">Main</a>
* <div id="nav" style="display: hidden">
* <a href="#" onClick="nav_click('subnav1',2); return false";>Subnav 1</a>
* <div id="subnav1" style="display: hidden">
* <div><a href="#">Item 1</a></div>
* <div><a href="#">Item 2</a></div>
* </div>
* <a href="#" onClick="nav_click('subnav2',2); return false";>Subnav 2</a>
* <div id="subnav1" style="display: hidden">
* <div><a href="#">Item 3</a></div>
* <div><a href="#">Item 4</a></div>
* </div>
* </div>
*
*
* You can also have navigation items display when loading the page.
* In the <body> tag, just add the appropriate nav_click()
* calls. For example, if we wanted "Subnav 1" from
* our earlier example to be opened by default, we would do:
*
* <body onLoad="nav_click('nav',1); nav_click('subnav1',2);">
*
* * There should be no need to customize anything here for a specific website, * unless needing to rename functions and variables if multiple sub-navigation * sections will be displayed on the same page. * *
* Changelog:
* 1.00 REVIE 2004/12/28 created ** * @author REVIE * @version 1.00 */ /** Holds the reference to the nav item that is currently open. */ var navopen = new Array(); /** * Shows or hides a navigational element. Navigational items must be * opened in the order that they are displayed, meaning the parent * element must be opened before the child of that parent can be displayed. *
* For example, if needing to open a navigational item on a second level, * you would do something like: *
* nav_click("parent",1); nav_click("selected",2);
*
* where "parent" is the name of the parent (root) element, and "selected"
* is the second-level item you wish to open.
*
* @param id the ID of the element to show or hide.
* @param level the level the element resides on (ex: "1" for a first-level
* navigational item, "2" for a second-level item, etc.).
* @param hide set to "hide" to hide the element, "show" to show the element,
* or leave blank to show the element if not visible, or hide if
* already visible.
*/
function nav_click(id, level, hide) {
if (level == null && id != null) {
for (var i = 0; i < navopen.length; i++) {
if (id == navopen[i]) {
level = i + 1;
break;
}
}
}
if (level == null) {
level = 1;
}
if (id == null && navopen[level - 1] != null) {
id = navopen[level - 1];
}
var element = document.getElementById(id);
if (element == null) {
alert('Cannot find element "' + id + '"!');
return false;
}
if (navopen.length > level) {
for (var i = navopen.length; i > level; i--) {
nav_click(navopen[i - 1], i, "hide");
}
} else if ((navopen.length + 1) < level) {
alert('Parent nav item not open for level #' +
(navopen.length + 1) + '! Open parent first!');
return false;
}
if (hide == "hide" || navopen[level - 1] == id) {
element.style.display = "none";
if (navopen[level - 1] == id) {
navopen.pop();
}
} else {
if (navopen[level - 1] != null) {
nav_click(navopen[level - 1], level, "hide");
}
element.style.display = "block";
navopen.push(id);
}
return false;
} // nav_click