/* Alex Brelsfoard's Dynamic Popup Menu Modified on: 2009-01-07 Created by: Alex Brelsfoard Version: 1.0 This script will create, add, and remove a new UL (list) element to your web page. Each time you call for the menu the script will read the position of the element you want the menu to appear below/next to, and dynamically place the menu there. Use CSS to adjust the placement of the new menu. ----------------------------------------------------------------------- Special thanks to Grant Peters for helping me debug cross-browser support. ----------------------------------------------------------------------- */ /* To add a new menu add a new line in the next three containers. Mimic or replace the "Example" lines. Having extra (UNused) menus defined will NOT effect the functionality of the working menus The menus array can be pulled out of this script and into the web page if needed (for dynamically built content). Just make sure to define these variables before you call this script. ------------------------------------------------------------------------*/ /* var MENU.menus = { 'Example' : {'Consulting':'/consulting','Products':'/applications','Resume':'/resume'}, 'Example2' : {'Home':'/','Projects':'/projects','Links':'/links'} }; */ /*-----------------------------------------------------------------------*/ // Unless you really know what you are doing, you probably should not // // edit anything below this point. // /*-----------------------------------------------------------------------*/ var MENU = { // Example of hard coded menus: // menus : {'History' : {'Historic Summary':'/summary.html','Recent History':'/recent.html','Early History':'/early.html'}, // 'About' : {'About Us':'/aboutus.html','Careers':'/careers.html'} // }, menus : {}, // This holds the container that is currently holding the dynamic menu current_menu_container : '', // This keeps track of which menu (if any) is currently open. menu_is_open : [], menu_is_closing : [], // I would suggest keeping this at least over 50 menu_close_delay : 150, /* ShowMenu (menu_container, location_id, menu_name) menu_container: id of element to insert the code into the new menu needs to be added to some place in the web page that the CSS will have access to. So we need a valid container to insert the menu's code into. Doesn't really matter as we are placing the menu on the page with absolute positioning. location_id: This is the ID of the container/element which this menu will be based off of. menu_name: This is the name of the menu which is being called (which you specified in the array definitions above). ---------------------------------------------------------------------*/ ShowMenu : function(menu_container, location_id, menu_name) { // Make sure we only create a new menu when necessary if (!MENU.menu_is_open[menu_name] && (MENU.menus[menu_name])) { // and also do not create a new instance when we simply were // about to close it. if (MENU.menu_is_closing[menu_name]) { MENU.menu_is_open[menu_name] = 1; MENU.menu_is_closing[menu_name] = 0; }else { MENU.menu_is_open[menu_name] = 1; MENU.current_menu_container = menu_container; // Get the location of the container element. var cont_left = cont_top = 0; var obj = document.getElementById(location_id); // Only continue if the browser supports offsetParent if (obj.offsetParent) { //alert("offsetParent has been verified"); do { cont_top += obj.offsetTop; cont_left += obj.offsetLeft; } while (obj = obj.offsetParent); // Create the new HTML elements var menu_cont = document.getElementById(menu_container); var new_menu = document.createElement('ul'); // Add the style and attributes to the new element var id_name = menu_name+'_menu'; new_menu.setAttribute('id',id_name); new_menu.setAttribute('class','popup_menu'); new_menu.setAttribute('onMouseOver',"MENU.KeepAlive('"+menu_name+"')"); new_menu.setAttribute('onMouseOut',"MENU.CloseMenu('"+menu_name+"')"); // Next 4 lines are just for IE new_menu.onmouseover = function() {MENU.KeepAlive(menu_name);}; // For IE new_menu.onmouseout = function() {MENU.CloseMenu(menu_name);}; // For IE new_menu.style.className ='popup_menu'; // For IE new_menu.id=id_name; // for IE // Set the position of this element new_menu.style.position = 'absolute'; new_menu.style.top = cont_top + 'px'; new_menu.style.left = cont_left + 'px'; // Now populate the new element with the appropriate menu var menu_items = ''; for (var name in MENU.menus[menu_name]) { menu_items += '
  • ' + name + '
    • '; } new_menu.innerHTML = menu_items; // Add the new element to the web page. menu_cont.appendChild(new_menu); // have to add this next line in there for IE to recognize the CSS class. document.getElementById(id_name).className = 'popup_menu'; } } } }, /* KeepAlive (menu_name) This will keep the specified menu alive (open) menu_name: the name of the menu ---------------------------------------------------------------------*/ KeepAlive : function(menu_name) { MENU.menu_is_open[menu_name] = 1; MENU.menu_is_closing[menu_name] = 0; }, /* CloseMenu (menu_name) This will iniciate an attempt to close the given menu. We want to give it a short time to wait before really trying to close, because the user could simply be moving the mouse. menu_name: The name of the menu ---------------------------------------------------------------------*/ CloseMenu : function(menu_name) { if (MENU.menu_is_open[menu_name]) { MENU.menu_is_open[menu_name] = 0; MENU.menu_is_closing[menu_name] = 1; setTimeout(function(){MENU.DoCloseMenu(menu_name);},MENU.menu_close_delay, menu_name); } }, /* DoCloseMenu (menu_name) This will do the actual closing of the menu. By closing the menu, we are actually removing the element from the web page entirely. menu_name: The name of the menu ---------------------------------------------------------------------*/ DoCloseMenu : function(menu_name) { if (!MENU.menu_is_open[menu_name]) { var cont_div = document.getElementById(MENU.current_menu_container); var remove_div = document.getElementById(menu_name+'_menu'); while (remove_div) { cont_div.removeChild(remove_div); MENU.menu_is_open[menu_name] = 0; MENU.menu_is_closing[menu_name] = 0; remove_div = document.getElementById(menu_name+'_menu'); } } } }