No spans. IE z-index thingie fixed.

Oct 7, 2003 by Aleksandar Vacić 2 minute read

At the original post for AD xMenu, I stated that main UL element must have position:relative. This created simplest possible solution, as it defined new coordinate system for submenus (which are absolutely positioned) and allowed me to use simple xLeft and xTop.

What I wasn’t aware of is that position:relative in IE also creates another “dimension” for z-index. After 5 days of trying this and that (I falsely accused floats as the source of problem), a good weekend spent with a girlfriend probably relaxed me enough to try something different and find a solution.

So now, ADxMenu 1.4 has a mandatory rule that you should not make your main list relatively positioned. This now means that submenu positions are calculated using xPageX and xPageY, which took few hours of testing to make sure it doesn’t break under any (yeah, right) circumstances.

Another improvement is that I removed all spans inside of A elements, which means we now have beautyful, simple unordered list of links.

Cleaned-up HTML

With all this, HTML definition for the menu is now:

    <ul id="menuList">
    
    <li>
    
      <a href="#" id="mmi" class="actuator">Main menu item</a>
    
      <ul class="menu" id="mmiMenu">
    
      <li><a href="#">Sub item</a></li>
    
      <li>
    
         <a href="#" id="subitem" class="actuator">Sub item</a>
    
          <ul>...</ul>
    
      </li>
    
      </ul>
    
    </li>
    
    <li><a href="#">Sub item2</a></li>
    
    <li><a href="#" id="item2">Sub item3</a></li>
    
    </ul>

Only the necessary markup must be placed. If you need a submenu, set class="actuator" id="itemname" on the item (and corresponding UL list). If you need plain item, A is enough. If you want to add icon, you must have an ID to shoot at from CSS.

CSS…mostly the same

You can do probably all that you want to here (but don’t use pos:relative :). Also, if you have submenus, be sure to provide .arrow and .arrowon classes as they are used to add submenu arrow (check examples for this).

Javascript build-up

For menu to behave like a drop-down menu, initializator function must be called on window.onload. It has two parameters:

menuID - this is ID of the main menu UL element

menuLayout - (optional) this can either be H or V. actually, if it’s anything else than V, it will be treated as H

This is simple example

    window.onload = function() {
    
    	ADXM_InitializeMenu("winxpH");
    
    	ADXM_InitializeMenu("winxpV", "V");
    
    }

where first line creates horizontal menu (menu layout is not passed and default, which is H is used). Second line creates vertical menu.