/* * menuDropdown.js - implements an dropdown menu based on a HTML list * * Author: Gail Ransom * Date: 2004 */ // currentMenu points to the curently opened ('dropped down') // menu if one is open, or none if all are closed. var currentMenu = null; // If function data item getElementTagName doesnt exist, is // undefined or equals null, set it to be a function that // returns null. if (!document.getElementTagName) document.getElementTagName = function () { return null; } // // INITIALIZE DROP DOWN MENU // function initializeDropDownMenu() { // Get a node list of all the LI elements in the document. var lMenus = document.getElementsByTagName("LI"); // Loop through each of the LI elements and process those that // are drop-down menus (these have a HTML attribute class="ddActuator") for (var i=0; i < lMenus.length; i++) { var mclassname = lMenus[i].className; if (mclassname.indexOf("ddActuator") >= 0) { // We have a menu! Get a nodelist of the menu's children. These will // be links (the menu 'actuator'), or lists (the dropdown part of the // menu). There are also (dont know why) text nodes (blank). var menuItems = lMenus[i].childNodes; for (var j=0; j < menuItems.length; j++) { // Loop through the menu components. If we find an actuator, set its // onmouseover and onclick events to show its dropdown part. if (menuItems[j].tagName == "A") { var actuator = menuItems[j]; // // ONMOUSEOVER event. // actuator.onmouseover = function() { if (currentMenu) { // currentMenu is defined and doesnt equal null, so a menu is // currently 'open'. Close the currently open menu and call // 'showMenu' to open the one the mouse is now over. // This means that once one menu is 'open', to open any other menu // the user only has to pass the mouse over the actuator (rather // than having to click on it) currentMenu.style.visibility = "hidden"; this.showMenu(); } } // // ONCLICK event // actuator.onclick = function() { if (currentMenu == null) { // No menu's are currently shown. Show the one the user has // just clicked on. this.showMenu(); } else { // Close the currently open menu. (the user is clicking on // the currently open menu - a result of the onmouseover // behaviour. currentMenu.style.visibility = "hidden"; currentMenu = null; } // Return false to prevent the browser from performing the // default action of following the A link. return false; } // // SHOW MENU function // actuator.showMenu = function() { // The 'this' keyword refers to the actuator (in this case, the A tag // that the user clicks on to open the menu). // The menu to be shown is a sibling of this node, a UL. var parent = this.parentNode; // Assume that menu is the first UL encountered (there should only be one!) menuTT = parent.getElementsByTagName("UL")[0]; if (menuTT != null) { // alert("opening the menu"); menuTT.style.left = this.offsetLeft + "px"; menuTT.style.top = this.offsetTop + this.offsetHeight + "px"; menuTT.style.visibility = "visible"; currentMenu = menuTT; } } // End function actuator.showMenu() } // END if menu component tagName == A } // END loop through menu components } // END if LI element is a ddActuator } // END loop through each of the LI elements } // END function initializeDropDownMenu() function doMenuSplit() { tString = temp; if(tString !='') { tString = tString.split('^^'); startLevel = '' htmlCode = ''; for(i=0;i'; // endCode = '' + startCode +'' + startCode; htmlCode = (i==0) ? startCode: htmlCode + endCode; htmlCode = htmlCode + tStringLwr[2]; startLevel = thisLevel } else { htmlCode = htmlCode + tStringLwr[2]; } htmlCode = (i==tString.length-1) ? htmlCode + '' : htmlCode; } if(document.all) { document.all.item('menu').innerHTML = htmlCode; }else{ document.getElementById('menu').innerHTML = htmlCode; } } }