• Products
  • Product 1
  • Product 2
  • Product 3
  • DhtnlGoodies - all your ajax scripts
  • Product 5
  • Product 6
  • And this is our featured product for this week
• Support
  • Contact Us
  • Report a bug
  • Sub item 3
  • Sub item 4
  • Sub item 5
• Partners
  • Partner A
  • Partner B
  • Another partner
  • Our latest partners
• Visions
• History

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