/** * Introducing Menu.js * * Menu.js is a free, small JavaScript (drop-down) menu for developers. It's * unobtrusive and only requires a HTML unordered list and your own CSS styles. * http://www.menujs.net/ * * Requires Prototype JS version 1.5.0 or greater. * (Also supports version 1.6.0.*, avoiding all deprecated methods) * http://www.prototypejs.org/ * _____________________________________________________________________________ * * As of version 1.2, released under the MIT License: * * Copyright (c) 2007-2009 Charming Design, Niek Kouwenberg * http://www.charmingdesign.net/ * * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software and associated documentation * files (the "Software"), to deal in the Software without * restriction, including without limitation the rights to use, * copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following * conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR * OTHER DEALINGS IN THE SOFTWARE. * _____________________________________________________________________________ * * Special thanks to CARE Internet Services B.V. * http://www.care.nl/ */ Menu = { /* Version of the Menu class */ Version: "1.3.1", /* * CONSTANTS */ /* Constant for a horizontal menu */ HORIZONTAL: 1, /* Constant for a vertical menu */ VERTICAL: 2, /* * MENU */ /* Hold the ID of the menu */ _menuId: null, /* Hold the menu UL node */ _menuNode: null, /* * TEMPORARY VARIABLES */ /* Hold the show timer */ _showTimeout: null, /* Hold the hide timer */ _hideTimeout: null, /* Will hold the link, submenu and level of the active menu node */ _activeNodes: new Array(), /* * OPTIONS */ /* Orientation of the menu (horizontal or vertical) */ _orientation: 1, /* Time in milliseconds before showing the sub menu */ _showPause: 0, /* Time in milliseconds before hiding the sub menu */ _hidePause: 1000, /* Opacity (0 = transparent, 1 = opaque) */ _opacity: 1, /* * METHODS */ /** * Sets the time to wait before hiding the sub menu. * * @param int secs * * @deprecated Please use the options argument for Menu.init() instead. */ setHidePause: function(secs) { Menu._hidePause = secs * 1000; /* deprecation warning */ alert("Deprecated method Menu.setHidePause() used: Please use the options argument for Menu.init()."); }, // function setHidePause /** * Initializes the dynamic menu. * * @param string menuId * @param object options * * Available options: * - orientation (int; one of: Menu.HORIZONTAL, Menu.VERTICAL) * - showPause (float; in seconds; default: 0.0) * - hidePause (float; in seconds; default: 1.0) * - opacity (float; 0 = transparent, 1 = opaque; default: 1; transparency of the sub menu) * * Example usage: * * * This method can be called after document load, but it is preferred to be * called directly from your page (HTML , before document load). This * way the menu loads faster and can be interacted with much sooner. */ init: function(menuId, options) { /* Save menu ID (fall back to the default ID "menu") */ Menu._menuId = (typeof menuId == "string") ? menuId : "menu"; /* Save options */ if (options) { /* Orientation */ if (options.orientation != undefined) { Menu._orientation = options.orientation; } /* Show timeout in seconds */ if (options.showPause != undefined) { Menu._showPause = options.showPause * 1000; } /* Hide timeout in seconds */ if (options.hidePause != undefined) { Menu._hidePause = options.hidePause * 1000; } /* Sub menu opacity */ if (options.opacity != undefined) { Menu._opacity = options.opacity; } } /* Check if the document is already loaded. Prototype 1.6.0 introduces * the document.loaded boolean, for 1.5*, check if we can retrieve an * element from the DOM (fails when document is not loaded). */ if (document.loaded === true || $(Menu._menuId)) { Menu._doInit(); } /* This is how it should work (init called before document load) */ else { /* Do the actual initialization on document load. The "dom:loaded" * event is preffered, but only available since 1.6.0 (with * document.observe construction). Fall back to the window onload * when not available. */ if (document.observe) { document.observe("dom:loaded", Menu._doInit); } else { Element.observe(window, "load", Menu._doInit); } } }, // function init /** * Initializes the drop down menu. * * Should be called on page load. */ _doInit: function() { /* After the DOM is loaded, save the menu node */ Menu._menuNode = $(Menu._menuId); /* Add events to each first level menu node (if any with a submenu). The * Menu._addEvents() method will add events recursively. */ Menu._addEvents(Menu._menuNode); }, // function _doInit /** * Recursively attaches events to the menu UL. * * @param HTMLUListElement ulElement * @param int level */ _addEvents: function(ulElement, level) { /* If level argument is not given, */ if (isNaN(level)) { level = 1; } /* Find all menu nodes */ var elements = (Element.select) ? ulElement.select("li") : ulElement.getElementsBySelector("li") for (var i = 0; i < elements.length; i++) { /* Only use the direct descendants (we're using recursion) */ if (elements[i].parentNode == ulElement) { /* Check if it has a sub menu (should return 1 or zero nodes) */ var subMenus = (Element.select) ? elements[i].select("ul") : elements[i].getElementsBySelector("ul"); if (subMenus.length > 0) { /* Add expand listener to the node */ elements[i].observe("mouseover", Menu._showSubMenu.bindAsEventListener(elements[i], level)); /* Add collapse listener to the node if it's the first level * (because the LI contains all other submenu's, therefore * any other listeners are over kill). */ if (level == 1) { elements[i].observe("mouseout", Menu._hideSubMenu.bindAsEventListener(elements[i], level)); } /* Add "submenu" class for this node link */ var a = (Element.select) ? elements[i].select("a")[0] : elements[i].getElementsBySelector("a")[0]; a.addClassName("submenu"); /* Recursion: check if the sub menu has nodes as well */ Menu._addEvents(subMenus[0], (level + 1)); } /* No sub menu */ else { /* Only hide any expanded sub menu when hovering this node */ elements[i].observe("mouseover", Menu._quickHideSubMenu.bindAsEventListener(elements[i], level)); } } } }, // function _addEvents /** * Shows the sub menu. * * @param Event e * @param int level */ _showSubMenu: function(e, level) { /* Don't bubble up */ Event.stop(e); /* is this the first menu node to be opened (need to check if we should apply the show timeout ) */ var isFirst = (Menu._activeNodes.length == 0); /* Hide previous opened sub menu */ Menu._quickHideSubMenu(e, level); /* Is this the first menu node and do we have a show delay? */ if (isFirst && Menu._showPause > 0) { /* Show in x (mili)seconds */ Menu._showTimeout = window.setTimeout(function() { Menu._doShowSubMenu(this, level); }.bind(this), Menu._showPause); } else { Menu._doShowSubMenu(this, level); } }, // function _showSubMenu /** * Shows the sub menu. * * @param Event e * @param int level */ _doShowSubMenu: function(node, level) { /* Clear possible timeout */ if (Menu._showTimeout) { window.clearTimeout(Menu._showTimeout); } /* Get node link and sub menu */ var a = (Element.select) ? node.select("a")[0] : node.getElementsBySelector("a")[0]; var subMenu = (Element.select) ? node.select("ul")[0] : node.getElementsBySelector("ul")[0]; /* Keep hover style as long as opened */ a.addClassName("menu_open"); /* Since 1.3, the class is also applied to the parent LI */ a.parentNode.addClassName("menu_open"); /* Show sub menu */ subMenu.style.visibility = "visible"; subMenu.style.position = "absolute"; /* Set correct position. (Note: the horizontal/vertical properties only * apply to the first level nodes. All other levels are fixed vertical. */ var pos = (Element.positionedOffset) ? node.positionedOffset() : Position.positionedOffset(node); if (level == 1 && Menu._orientation == Menu.HORIZONTAL) { subMenu.style.left = pos[0] + "px"; subMenu.style.top = (pos[1] + node.getHeight()) + "px"; } else { subMenu.style.left = (pos[0] + node.getWidth()) + "px"; subMenu.style.top = pos[1] + "px"; } /* Apply opacity if not fully opaque. (Apply for sub menu of first level * only, because otherwise opacity would be doubled.) */ if (level == 1 && Menu._opacity > 0 && Menu._opacity < 1) { subMenu.setOpacity(Menu._opacity); } /* Save submenu */ Menu._activeNodes.push({"level": level, "link": a, "subMenu": subMenu}); }, // function _doShowSubMenu /** * Immediately hides the active menu. * * @param Event e * @param int level */ _quickHideSubMenu: function(e, level) { /* Don't bubble up */ Event.stop(e); /* Clear possible timeout */ if (Menu._hideTimeout) { window.clearTimeout(Menu._hideTimeout); } /* And hide the open menus from the given level up */ Menu._doHideSubMenusFromLevel(level); }, // function _quickHideSubMenu /** * Method for hiding all sub menus. * * Triggered onmouseout of first sub menu (level 2). * * @param Event e * @param int level */ _hideSubMenu: function(e, level) { /* Don't bubble up */ Event.stop(e); /* if hiding (lost focus on first level), do not show! */ if (Menu._showTimeout) { window.clearTimeout(Menu._showTimeout); } /* No pause? Don't use the timeout */ if (Menu._hidePause <= 0) { /* Hide all sub menus */ Menu._doHideSubMenusFromLevel(1); } else { /* Hide in x (mili)seconds */ Menu._hideTimeout = window.setTimeout(function() { Menu._doHideSubMenusFromLevel(1); }, Menu._hidePause); } }, // function _hideSubMenu /** * Hides all active sub menus from the given level. * * @param int level (Default: 1) * * @return boolean */ _doHideSubMenusFromLevel: function(level) { /* If level argument is not given, default to 1 */ if (isNaN(level)) { level = 1; } /* Remove these sub menus from the array */ Menu._activeNodes = Menu._activeNodes.findAll(function(node) { /* Hide all sub menus with a level equal or higher than the given * level, and return false to remove these from the array. */ if (node.level >= level) { /* Remove hover style */ if (node.link) { node.link.removeClassName("menu_open"); node.link.parentNode.removeClassName("menu_open"); } /* Hide sub menu */ if (node.subMenu) { node.subMenu.style.visibility = "hidden"; } /* Return false to remove node from the array */ return false; } /* Return true for the other nodes, keeping them in the array */ return true; }); } // function _doHideSubMenusFromLevel }; // class Menu