New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Bookmark to del.icio.us

FF1+ IE6+ Opera8+

All Levels Navigational Menu (v4.1)

Author: Dynamic Drive

Note: Update March 25th, 15' to v4.1: Fixed issue in mobile menu where top level UL not showing

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.
  • Truly mobile friendly, by switching to compact vertical list menu in mobile and small screen browsers based on CSS media query match. v4.0 feature
  • 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".
  • 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 Developer's View

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:

  1. A unique ID (ie: "ddtopmenubar") that's added to the menu bar's outermost container.
  2. A CSS class name that styles the top menu (ie: "mattblackmenu").
  3. 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:

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

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 5 variables related to image paths and timer you may want to configure:

mql: window.matchMedia("screen and (max-width: 700px)"), // CSS media query to switch to mobile menu when matched
enableshim: true, //enable IFRAME shim to prevent drop down menus from being hidden below SELECT or FLASH elements?

arrowpointers:{
downarrow: ["ddlevelsfiles/arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight]
rightarrow: ["ddlevelsfiles/arrow-right.gif", 12,12], //[path_to_right_arrow, arrowwidth, arrowheight]
backarrow: ["ddlevelsfiles/left.gif"], //[path_to_back_arrow, arrowwidth, arrowheight]
showarrow: {toplevel: true, sublevel: true} //Show arrow images on top level items and sub level items, respectively?
},
hideinterval: 200, //delay in milliseconds before entire menu disappears onmouseout.
effects: {enableswipe: true, enableslide: true, enablefade: true, duration: 200},
httpsiframesrc: "blank.htm",

Note that the enableslide option (a v3.0 option) only works when the enableswipe is also set to true. The last httpsiframesrc option is only applicable if the menu is run on a secure (https) page. In that case, set this option to a *blank* page *within* the secure area to prevent an IE security prompt.

Configuring the mobile portion of the menu

All Levels Menu whether in "horizontal" or "vertical side bar" mode converts to a mobile optimized compact list menu when the desired criteria is matched. The following screenshot shows the conversion for the horizontal version of the menu:


Screenshot

As you can see, when the threshold is met, the regular menu disappears altogether, replaced by a drawer icon that when clicked on activates a compact list menu. In the event of a  "vertical side bar", the regular menu is simply replaced with the compact menu, with no "toggler" used to toggle its visibility.

- Setting the mobile threshold

Before anything else you'll want to set the threshold when the user's environment is considered to be in "mobile", so the mobile version of the menu is activated. Inside ddlevelsmenu.js, modify the line:

mql: window.matchMedia("screen and (max-width: 700px)"), // CSS media query to switch to mobile menu when matched

The portion in red should be a valid CSS media query to match when the menu switches over to the mobile version. Some examples of valid CSS media queries are as follows:

  • screen and (max-width: 700px)  //when the browser width is 700px or below, desktop or mobile alike
  • screen and (max-device-width: 480px)  //when the device width is 480px or below, which usually only means in mobile environments
  • screen and (max-device-width: 480px) and (orientation: portrait)  // when device width is 480px or below and in portrait mode only

The most common decision to make is whether to use max-width or max-device-width- the former means the value set applies to both desktop and mobile browsers, while the later limits the resulting match to only mobile devices, with desktop browsers always showing the regular menu.

IMPORTANT: Your page should carry the META tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the HEAD section of your page to ensure the best mobile experience with this menu. This META tag instructs mobile browsers not to zoom out when rendering the webpage by default, which will lead to CSS media queries not being matched properly if the page is.

- Defining/ customizing the mobile menu toggler

When implementing the horizontal version of the menu, you need to add a mobile menu toggler to your page (hidden by default) to toggle the mobile version of the menu when the conditions are met. By default the toggler markup looks like this:

<a class="animateddrawer" id="ddtopmenubar-mobiletoggle" href="#">
<span></span>
</a>

The link should carry a CSS class of "animateddrawer" and ID of "menubarid-mobiletoggle", where "menubarid" is replaced with the ID of your horizontal menu bar's ID, such as:

<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 ID of the toggler needs to follow this convention in order for the script to properly show and hide it based on the visibility of the mobile menu itself. You can place the toggle anywhere on your page you see fit.

The style of the mobile menu toggler is controlled by the assigned CSS class "animateddrawer", whose style definitions can be found near the bottom of "ddlevelsmenu-base.css" under "Animated Drawer icon (horizontal mobile menu toggler) CSS".

- Modifying the style of the mobile compact list menu

The style of the mobile compact list menu is determined by the CSS class "mobilelevelsmenu" that's added to the outermost container of the menu. To modify the style, go into "ddlevelsmenu-base.css" under "Mobile Menu CSS".