Dynamic Drive DHTML Scripts- All Levels Navigational Menu

New Revised CSS Library Forums Web Tools

Home Menu and Navigation Multiple Level Menus Here

All Levels Navigational Menu (v3.03)

Author: Dynamic Drive

Note: Update March 1st, 12' to v3.03: In mobile browsers, sub menus now disappear when user tabs anywhere outside the menu. Only .js file changed from v3.02.

Description: All Levels Navigational Menu is a CSS/ HTML list based menu with support for infinite levels of sub menus. It's lightweight and easy to implement (the menu contents are simply regular HTML lists), with all of the menu links search engine friendly. Furthermore, the menu is structured in a way that makes it very easy to customize its look. Following are additional details on All Levels Top Navigational Menu:

Standards compliant, ordinary HTML lists based menu. Drop down menus containing additional sub levels are simply defined as nested lists.
The primary menu bar itself uses no special positioning, and hence can be embedded anywhere and relative to anything on the page.
Support for either "Horizontal Top Bar" or "Vertical Side Bar" orientation. In the later, the drop down menus drop down to the right of the primary menu items.
Versatile "IFRAME SHIM" feature to ensure drop down menus appear above browser controls such as SELECT menus.
Three different animations that can be toggled- "swipe", "slide in" and "fade in". "slide in" added in v3.0
Ability to specify the delay before sub menus are hidden once the mouse rolls out of them (in milliseconds).
Ability to specify two "arrow" graphics that will be automatically added to top menu items with a drop down, plus individual drop down items with additional levels, respectively,
Script dynamically adds a CSS class of "selected" to top menu items for the duration of the mouse being over it, including any of its drop down menus, to indicate to users the menu item they're currently at. Style this CSS class as desired.
CSS and HTML structure designed for easy skinning. See Also: All Levels Menu Generator.

Multi Level Menus have arrived to this dimension!

Two demos (top and side menu)

Directions

Directions: Simply download ddlevelsmenu.zip, which contains all the files that make up the menu:

demo.htm (view)
demo2.htm (view)
ddlevelsfiles/ddlevelsmenu.js (view)
ddlevelsfiles/ddlevelsmenu-base.css (view)
ddlevelsfiles/ddlevelsmenu-topbar.css (view)
ddlevelsfiles/ddlevelsmenu-sidebar.css (view)
Default menu images:

Customizing the menu's HTML

The Menu's HTML markup is structurally divided into two parts:

HTML for the Top Menu Bar itself:

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/" rel="ddsubmenu3">Web Tools</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

The first chunk defines the HTML for the primary menu, whether it's a Top or Side Menu. Customize as desired, but at a minimum, it should contain:

A unique ID (ie: "ddtopmenubar") that's added to the menu bar's outermost container.
A CSS class name that styles the top menu (ie: "mattblackmenu").
A rel attribute inside the <a> element of each menu link, with a value reflecting to the ID of its corresponding drop down menu (see Part 2 below).

Following the primary menu's HTML, call:

which initializes the menu by binding everything together when the page loads. The 2nd parameter should be either "topbar" or "sidebar". This value dictates whether the first drop down menu drops beneath or to the right of the primary menu.

HTML for each Drop Down Menu associated with a Primary Menu

Moving on is the HTML for each drop down menu with IDs that must correspond to those specified in the "rel" attributes above. Each drop down should consist of a structurally valid HTML list, nested if it contains sub menus. Below is the HTML for the first drop down menu referenced above (rel="ddsubmenu1"):

<!--Drop Down Menu 1 HTML-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
 <ul>
 <li><a href="#">Sub Item 3.1a</a></li>
 </ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
 <ul>
 <li><a href="#">Sub Item 5.1a</a></li>
 <li><a href="#">Item Folder 5.2a</a>
  <ul>
  <li><a href="#">Sub Item 5.2.1a</a></li>
  <li><a href="#">Sub Item 5.2.2a</a></li>
  </ul>
 </li>
 </ul>
</a>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

The CSS class "ddsubmenustyle" added to the drop down menu above styles it so it's absolutely positioned and hidden initially on the page. Levels are added to particular menu items simply by nesting HTML lists. If you're not handy with HTML lists, now's a good time to brush up on things, as the HTML for each drop down must be a structurally valid HTML list in order for the script to behave properly.

Important Note: The HTML for the drop down menus themselves which are hidden by default via CSS, should be added to the <BODY> of your page outside any other element. A good spot would be the bottom of the page, right above the </BODY> tag.

Specifying image paths/ hide timer delay

Inside ddlevelsmenu.js, at the top, there are 6 variables you may want to customize:

enableshim: true,
downarrowpointer: ["ddlevelsfiles/arrow-down.gif", 11,7],
rightarrowpointer: ["ddlevelsfiles/arrow-right.gif", 12,12],
hideinterval: 200,
effects: {enableswipe: true, enableslide: true, enablefade: true, duration: 200},
httpsiframesrc: "blank.htm",

The line in bold controls the animation for the menu- whether to enable the swipe effect, slide-in effect, fade effect, plus the duration of the animation in milliseconds (ie: 500= 1/2 seconds). Note that the enableslide option (a v3.0 option) only works when the enableswipe is also set to true.