• Menu 1
  • Sub 1.1
  • Sub 1.2
  • Sub 1.3
    • Sub 1.3.1
    • Sub 1.3.2
• Menu 2
• Menu 3
  • Sub 3.1
  • Sub 3.2
  • Sub 3.3
    • Sub 3.3.1
    • Sub 3.3.2

Usage

Include menus.js and the stylesheet menu.css.

You will need the functions getAncestor and addEvent from jslib.js.

Html

A simple, nested list, with an id on the root ul element:

<ul id="mainmenu">
	<li>Menu 1
		<ul>
			<li><a href="menus.html">Sub 1.1</a></li>
			<li><a href="menus.html">Sub 1.2</a></li>
			<li><a href="menus.html">Sub 1.3</a>
				<ul>
					<li><a href="menus.html">Sub 1.3.1</a></li>
					<li><a href="menus.html">Sub 1.3.2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Menu 2</li>
	<li>Menu 3
		<ul>
			<li>Sub 3.1</li>
			<li>Sub 3.2</li>
			<li>Sub 3.3
				<ul>
					<li>Sub 3.3.1</li>
					<li>Sub 3.3.2</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Javascript

window.onload = expandMenus(menuid [, autoCollapse]);

Or, better, use addLoadEvent (jslib.js):

addLoadEvent(function(e) {
	expandMenus(menuid [, autoCollapse]);
});

Parameters:

• menuid: id of root ul of the list;
• autoCollapse:
  • "all": when expanding a menu, collapse all others;
  • "none": don't auto-collapse;
  • "submenus" or nothing or anything else: when collapsing a menu, also collapse his submenus;