xMenu2

CSS

The elements of class mLabel and mBox are contained by an element of class aMenu or rMenu. aMenu elements are absolutely positioned. rMenu elements are relatively positioned. The horizontal menu at the top-left of this page is relatively positioned. The others are absolutely positioned.

.aMenu {
  position:absolute;
  overflow:visible;
}
.rMenu {
  position:relative;
  overflow:visible;
}
.mLabel {
  position:absolute;
  overflow:hidden;
}
.mBox {
  position:absolute;
  overflow:hidden;
}

HTML

The menu's HTML elements require the following id naming convention:
Menus: menuM - where M is the menu number
Labels: labelML - where M is the menu number and L is the label number for this menu
Boxes: boxMB - where M is the menu number and B is the box number for this menu

<div id='menu1' class='aMenu'>
  <div id='label11' class='mLabel'>Label</div>"
  <div id='box11' class='mBox'>
    <a class='m' href=''>Item</a>
    <a class='m' href=''>Item</a>
  </div>
  <div id='label12' class='mLabel'>Menus</div>"
  <div id='box12' class='mBox'>"
    <a class='m' href=''>Item</a>
    <a class='m' href=''>Item</a>
  </div>
</div>

Javascript

Multiple menus can be instantiated on the same page. Menu labels can be aligned horizontal or vertical. Each menu has a floating option. The 3 absolute menus in the corners of this window all float when the window is scrolled. The relative menu doesn't float. Each menu has its own z-index. Each menu has its own set of colors.

Creating the Menu Object

var menu1, menu2, menu3, menu4;
window.onload = function() {
  // absolute, top-right
  menu2 = new xMenu2(
    true, false, true,          // absolute, horizontal, floating,      
    xClientWidth() - 75, 20, 5, // menuX, menuY, menuZ                  
    0, [75,75,75], 20,          // lblOffset, lblWidthsArray, lblHeight,
    [140,170,155],              // boxWidthsArray,                      
    '#ffccff', '#000080',       // activeLblColor, inactiveLblColor,    
    '#FF6600', '#CC6600',       // activeLblBkgnd, inactiveLblBkgnd     
    '#FF6600'                   // boxBkgnd                             
  );

  ...
}

Size

Different widths can be specified for each label and box. If a menu box will be clipped by the right or bottom edge of the window it will be aligned to the left or top side of its label.

Position

The label and box positions are calculated by the menu's paint() method which is called once when the menu object is created and each time the window is resized. Specify the position of the first label and other labels are positioned automatically. For absolute menus the first label position is given by an absolute coordinate. For relative menus the first label position is determined by the placement of the rMenu DIV in the HTML.

Misc

Downloads

xMenu2 is not yet included in the download package since it is still somewhat experimental. But if you want to look deeper, grab these files: this page, x.js, xslideto.js, xmenu2.js, xmenu2_html.js

Notes

I'm using a javascript function to insert the html for each menu. This is convenient for this demo page. In real usage you should not do that, but use a server-side script (like PHP) to insert the menu html.

Note that I've been using this demo to experiment with this menu. You'll find some things commented out, and some things that are experimental.

Last Update

This page was last updated on 21 April 2005.