Drill Down Menu (v1.6)
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.

Step 1: Insert the following code into the <head> section of your page:
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"):
- drilldownmenu.js
- drilldownmenu.css
-
4 images:
Step 2: Then, insert the following sample HTML for a drill down menu on your page:
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 .
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 optionDefaults 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> See also the " |
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 (" 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: