All Levels Navigational Menu (v4.3)
Note (Aug 15th, 16) v4.3: Revamped mobile menu to full page side menu, adds animation between level changes.
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. Mobile friendly, the menu transforms into a left side menu with a hamburger style toggler on mobile devices.
All Levels Menu is structured in a way that makes it very easy to customize its look. Here's a summary of its features:
- 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 full page side menu in mobile and small screen browsers based on CSS media query match.
- 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: 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)
- ddlevelsfiles/ddlevelsmenu-mobile.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:
<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 into a mobile optimized full page side 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 side menu that slides in from the left edge of the browser.
- 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 alikescreen and (max-device-width: 480px)
//when the device width is 480px or below, which usually only means in mobile environmentsscreen 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
For each instance of your primary menu, it should be accompanied with a mobile menu toggler (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 primary 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> <a class="animateddrawer" id="ddtopmenubar-mobiletoggle" href="#">
<span></span>
</a> <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-mobile.css"
under "Animated Drawer icon (horizontal mobile menu toggler) CSS".
- Modifying the style of the mobile side bar menu
The style of the mobile menu is determined by the CSS class "mobilelevelsmenu
"
that's added to the outermost container of the menu. To modify the style, edit "ddlevelsmenu-mobile.css".