New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opera9+

Drill Down Menu (v1.6)

Author: Dynamic Drive

August 10th, 09' (v1.6): Adds ability to specify explicit height for main menu, instead of defaulting to top UL's natural height.

Description: This script turns an ordinary UL list into a drill down style menu, adding a new dimension to the conventional drop down menu. The top level UL dictates the height of the menu, with the sub levels tucked away until navigated to. You can customize which level should be shown by default, whether to remember the last shown level when the page reloads, plus the speed of the "drilling" animation. And to ensure the user doesn't get lost with all this drilling, the script can optionally display "breadcrumb" links that reflect the current level the user is at.

FYI the menu degrades well in browsers with JavaScript disabled. In those instances, the menu is simply shown as a single column of links, fully accessible.

Directions Developer's View

Step 1: Insert the following code into the <head> section of your page:

Select All

It references a two external files and two images (images are customizable), which by default you should upload to the same directory as the page itself (right click each file and select "Save As"):

Step 2: Then, insert the following sample HTML for a drill down menu on your page:

Select All

Structurally a drill down menu should just be a nested HTML list contained inside a DIV element. The script automatically parses the various levels in this UL to turn them into a hierarchy of panels. That's it for installation, though read on for full details on customizing the script.

Available Options for new drilldownmenu()

You call the constructor function drilldownmenu() in the HEAD section of your page to initialize a drill down menu.  The format is:

var uniquevariable=new drilldownmenu(options)

Where "uniquevariable" should be an arbitrary but unique variable (for each instance of drill down menu), and options is an object literal containing the desired options. Speaking of which, here they are:

options Description
menuid

Required

 The ID of the DIV container that contains the drill down menu (a UL list).
filesetting

Defaults to {url: null, targetElement: null}

 If this option is defined (requires version 1.5+ of the script), the script will look for the entire drill menu's HTML inside filesetting.url, and once loaded, add it to an empty, arbitrary element on the page with ID filesetting.targetelement.

filesetting.url should be the path to the HTML file on your server, relative to the current page, that contains the entire HTML of the drill menu, including its outermost DIV container (that carries the menuid ID attribute).

filesetting.target should be the ID of an arbitrary, empty DIV on the current page you wish the menu to be added into once it's been fetched via Ajax.

Here's an example setting:

filesetting: {url:'menu.htm', targetElement:'drillarea'}
breadcrumbid

Defaults to undefined

 The ID of an empty, arbitrary DIV on the page that will be used to display breadcrumbs for this menu instance. Make sure such a DIV is defined on the page if this option is defined. For example:

breadcrumbid: "navdiv",
menuheight v1.6 option

Defaults to 'auto'

 Lets you specify an explicit width for the main menu bar, in pixels. Value should be an integer. If this option is not defined or set to "auto", menu will default to the natural height of the top level UL list. For example:

menuheight: 200,
selectedul

Defaults to null

 This option lets you enter the ID (attribute value) of the specific child UL to show by default when the page loads (instead of the top level UL). To set this option, first give the UL you wish to show a ID, then set the selectedul option to this ID. For example:

selectedul: "entertain",

And within the menu's HTML:

<li><a href="#">Movies</a>
<li><a href="#">Entertainment</a>
 <ul id="entertain">
 <li><a href="#">Sub Item 1.1</a></li>
 <li><a href="#">Sub Item 1.2</a></li>
 </ul>
</li>

See also the "persist" option below, which if defined affects this option.
persist

Defaults to {enable: true, overrideselectedul: true}

 Sets whether to persist the last viewed UL in a drill down menu, so it is remembered and recalled within the same browser session. Two Boolean values are expected, with the first controlling whether persistence should be enabled at all.

The second setting ("overrideselectedul") comes into play when the "selectedul" option above is also defined. In such an event, "overrideselectedul" lets you decide whether persistence should override the "selectedul" option in recalling the last viewed UL, even if the later is defined.  Default is true (or "yes").

For example:

persist: {enable: true, overrideselectedul: false}
speed

Defaults to 100 (milliseconds)
 

 Sets the speed of the "drill" animation, in milliseconds. Defaults to 100.
Public Methods Description
menuinstance.back() Once a drill menu has been initialized, you can call this method anywhere on your page to go back one level within the menu on demand, where "menuinstance" is the unique variable name assigned to the menu (ie: var uniquevariable=new drilldownmenu(options)).

All but the first option above is mandatory. Lets say you wish to create a drill down menu where the 2nd nested UL is selected by default, persistence is enabled but overpowered by the "selectedul" setting, and finally, no breadcrumb trails. Here's what your initialization code may look like:

var ddsitemenu=new drilldownmenu({
 menuid: 'drillmenu2',
 selectedul: 'activities',
 persist: {enable: true, overrideselectedul: false}
})

Demo:

Creating "back button" links

By default each drill down menu adds a "back button" control to the top of each sub UL automatically . However, you can further create manual links on the page that do the same. Simply create a link and give it a rel="drillback-menuid" attribute, where menuid is the ID of the drill menu's main UL (aka the menuid setting value). Lets give the drill menu above a manual back image button:

<a href="#" rel="drillback-drillmenu2"><img src="backbutton.jpg" style="border-width:0; margin: 10px 0 10px 17px" /></a>

Notice that a button added this way will dynamically disable itself if the user is currently already at the top level UL within the menu.

  Styling the Menu

The general style of your drill down menu is styled using the CSS file drilldownmenu.css. You can customize most properties, though pay attention to the comments. To further modify the style of a particular drill down menu on your page (if there are more than one), simply style the menu's ID attribute.

Customizing image paths, bread crumb text length etc

At the top of drilldownmenu.js, you should customize a few global settings of the script, such as the full URLs to the images used by the script, plus the length of the bread crumb text:

this.sublevelarrow={src:'right.gif', width:'8px', top:'3px', left:'6px'} //full URL to image used to indicate there's a sub level
this.breadcrumbarrow='right.gif' //full URL to image separating breadcrumb links (if it's defined)
this.loadingimage='loader.gif' //full URL to 'loading' image, if menu is loaded via Ajax
this.homecrumbtext='Home Dir' //Top level crumb text
this.titlelength=35 //length of parent LI text to extract from to use as crumb titles
this.backarrow='leftarrow.gif' //full URL to image added in front of back LI

Table Of Contents

This script consists of an index page plus several supplementary pages: