ExMenu

Standards based expanding DHTML menus

ExMenu provides a DHTML fold out tree-like menu system maintaining ideals and standards such as:

  • Semantic (X)HTML and CSS
  • Accessibility
  • Unobtrusive DHTML

Examples

Place the following code in the <head> of your XHTML document.

Note: For best performance, it is recommended that you combine all the JavaScript files below into a single minified file.

<link rel="stylesheet" type="text/css" href="exmenu-basic.css" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.exmenu.js"></script>

The only other thing to do is add the exmenu class and a unique id to the <ul> elements that you would like to transform.

<ul id="primarynav" class="exmenu">
    <li><a href="#gallery">Gallery</a><ul>
        <li><a href="#mobile">Mobile Photos</a></li>
        <li><a href="#pano">Panoramas</a><ul>
            <li><a href="#sydney">Sydney Panoramas</a></li>
        </ul></li>
    </ul></li>
</ul>

Less-obtrusive alternative setup

If you find the addition of the exmenu class too obtrusive, you can forgo the addition of that class and initialise the <ul> manually using the exmenu jquery extension.

$(document).ready(function() {
    $('#primarynav').exmenu();
});

Setting the current page

There are three ways that the current page can be set:

  1. Set a class of current on the <li> that represents the current page (or get your CMS to do it for you).
  2. ExMenu will automatically try to match the text of the first <h1> of your page with an item in the menu. If it finds a match it will flag that item as the current page.
  3. You can set the current page manually using the ‘setCurrent’ action of the exmenu plugin. (see code sample below).
$(document).ready(function() {
    $('#primarynav').exmenu(
        'setCurrent',
        'The Menu Item Text To Match'
    );
});

Working example

A complete demonstration of exmenu is available.

The demonstration page uses an extra CSS file and some images to enhance the appearance of the menu.

Download

ExMenu is licensed under the The GNU General Public License (GPL), by downloading it you are agreeing to abide by the terms of that license.

Package

Download the complete ExMenu 2.3.5 example package (.zip)

Individual files

More advanced styling can be achieved by examining the example page or by downloading the package .

Older versions

Version 1.0 contained a simple variation of the menu that didn’t allow parent links to be followed as the parent link was hijacked for expanding/collapsing the sub-menu.

This simplified variation is a great way to increase the clickable area of parent links, and can work well for simple sites that don’t require parent pages to be accessible from the navigation.

This simplified functionality may be added back to exmenu in future, until then, the old version is available below:

Posted in