Roll over menu above
New demo with dynamic colored backgrounds
This is an adaption of a dhtmlgoodies script by Batalf that can be found here Dhtml list based menu.
The original script had no background image in the submenu.
Here I have modified the script in the following way:
-
Updated the class "dhtmlgoodies_menu ul.menuBlock2" to add a fixed height and width
#dhtmlgoodies_menu ul.menuBlock2{ border:0px; padding:0px; border:1px solid #317082; /* ADD - makes first level submenu wider and higher for image */ width:300px; height:190px; padding-top:10px; }
- I have then modified the menu list so that each "main level" menu <li> has a UNIQUE id. This id name MUST be the same as the name of the images to be used as the background image:
<li id="products"><a href="#">Products</a> <li id="support"><a href="#">Support</a>...
-
Next was to modify the javascript that builds the main menu to accept this new id name (rather than setting a default id name as in the original script) and passing it to the function that creates the submenus.
Function "initDhtmlGoodiesMenu()":function initDhtmlGoodiesMenu(){ dhtmlgoodies_menuObj = document.getElementById("dhtmlgoodies_menu"); var aTags = dhtmlgoodies_menuObj.getElementsByTagName("A"); for(var no=0; no<aTags.length; no++){ var subUl = aTags[no].parentNode.getElementsByTagName("UL"); if(subUl.length>0 && aTags[no].parentNode.parentNode.parentNode.id != "dhtmlgoodies_menu") { var img = document.createElement("IMG"); img.src = dhtmlgoodies_menu_arrow; aTags[no].appendChild(img); } } var mainMenu = dhtmlgoodies_menuObj.getElementsByTagName("UL")[0]; mainMenu.className="menuBlock1"; mainMenu.style.zIndex = currentZIndex; mainMenu.setAttribute("currentDepth" ,1); mainMenu.currentDepth = "1"; mainMenu.onmouseover = mouseOverMenu; mainMenu.onmouseout = mouseOutMenu; var mainMenuItemsArray = new Array(); var mainMenuItem = mainMenu.getElementsByTagName("LI")[0]; mainMenu.style.height = mainMenuItem.offsetHeight + 0 + "px"; while(mainMenuItem){ // ADD - get main menu id name main_menu_id = mainMenuItem.id; mainMenuItem.className="currentDepth1"; mainMenuItem.id = "dhtmlgoodies_listItem" + liIndex; mainMenuItem.onmouseover = showHideSub; liIndex++; if(mainMenuItem.tagName=="LI"){ mainMenuItem.style.cssText = "float:left;"; mainMenuItem.style.styleFloat = "left"; mainMenuItemsArray[mainMenuItemsArray.length] = mainMenuItem; // ADD - "main_menu_id" to be sent to the submenu initSubMenus(mainMenuItem,0,2,main_menu_id); } mainMenuItem = mainMenuItem.nextSibling; } for(var no=0;no<mainMenuItemsArray.length;no++){ //alert(mainMenuItemsArray[no].id) initSubMenus(mainMenuItemsArray[no],0,2,""); } menuParentOffsetLeft = getLeftPos(dhtmlgoodies_menuObj); window.onresize = resizeMenu; dhtmlgoodies_menuObj.style.visibility = "visible"; }
-
The final thing to do was to modify the "initSubMenus()" function to use this new var to show a backgorund image for the submenu.
I could, of course, have created a seperate class for each submenu with the backgorund image defined, but I think that this mehot is more flexible ane requires less css styles.:
function initSubMenus(inputObj,initOffsetLeft,currentDepth,main_menu_id) { var subUl = inputObj.getElementsByTagName("UL") if(subUl.length>0){ var ul = subUl[0]; ul.id = "subOf" + inputObj.id.replace(/[^0-9]/g,""); ul.setAttribute("currentDepth" ,currentDepth); ul.currentDepth = currentDepth; ul.className="menuBlock" + currentDepth; // ADD - add background image and no-repat ul.style.backgroundImage="url("images/'+main_menu_id+'.jpg")"; ul.style.backgroundRepeat="no-repeat"; ul.onmouseover = mouseOverMenu; ul.onmouseout = mouseOutMenu; the rest of the function is the same...
- To finish it all off, I have played around with the css to change colors etc to suit my needs.
The original script is here: Dhtml list based menu