xMenu6

Intro

This page demonstrates the UL-based xMenu6 in a two-column fixed width CSS layout. View xMenu6 documentation and source code.

Features

Labels As Links

This demo has bLblIsItm==false so clicking a label does not cause the link to be followed. Clicking either an icon or label causes the sub-menu to open/close. If bLblIsItm==true clicking a label causes the link to be followed. You must click an icon to open/close sub-menus without following the link.

Auto-open & Highlight

If sActiveItmId is provided then the menu will be auto-opened to the item or label whose A element has sActiveItmId. In this demo the "xMenu6" item is auto-opened.

Dynamic Icons

An icon is dynamically inserted to the left of each label. You provide two CSS classes for this icon which are applied based on the opened/closed state of the label's sub-menu.

Progressive Enhancement

If Javascript is disabled the menu becomes a standard, nested list which can be styled separately from the dynamic menu.

Rollover Effects

It supports roll-over effects on items and labels. You specify different CSS classes for items and labels both in mouseover and mouseout states.

More Features

  • Only one branch per level can be open at one time.
  • It is built on the xLibrary and so is extremely cross-browser.
  • It supports an unlimited number of levels and any number of menus per page.

Usage

HTML Structure

xMenu6 works with standard, nested ULs where every LI element contains an A element. This defines an item. The following example has three items and no sub-menus.

<ul>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>

Each A element is optionally followed by a UL element. This defines a label and a sub-menu. The following example has one sub-menu.

<ul>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li>
    <a href="#">Level 1 Label</a>
    <ul>
      <li><a href="#">Sub-menu Item</a></li>
      <li><a href="#">Sub-menu Item</a></li>
    </ul>
  </li>
</ul>

Sub-menus can be nested to any depth. View the source of this page for a more complex example.

UL ID and Class

The outermost UL must have an ID. You will pass this when you create the xMenu6 object. The outermost UL can also have a CLASS. This is used to apply styles when Javascript is disabled. View the source of this page for more details.

<ul id='xMenu6_1' class='xMenu6'>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>

Auto-Open Active Item

The active item (the item which corresponds to the current page) can be auto-opened. The active item's A element should be given the ID "ActiveMenuItem".

<ul id='xMenu6_1' class='xMenu6'>
  <li><a href="#">Item</a></li>
  <li><a id='ActiveMenuItem' href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>

For more Javascript toys visit Cross-Browser.com