DHTMLGoodies - List Based Menu with Images

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:

  1. 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;
      
    }
    	
  2. 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>...
    
  3. 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";	
    }
    
  4. 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...
    
  5. 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

 Are My Sites Up?  ServWise - Low cost, reliable and fast hosting with 24/7 support