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;no0 && 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