Putting the contents of a drill menu inside an external file

By default the HTML markup of a drill down menu (the ULs that is) is defined inline on the page. If you wish, you can move this portion of the menu to an external file on your site, and have the script use Ajax to dynamically add it to the desired target page(s) instead. One advantage of this is so the menu contents are neatly contained in its own file, with any change to this file reflected instantly on all pages that use it.

The first step to do this is simply to put the entire HTML markup portion of a drill menu inside a blank text file, for example, "drillmenufile.htm". Notice inside this file how it contains the outermost DIV element of the menu as well, the one that contains the unique ID identifying this menu. It does not, however, contain the script references and the JavaScript initialization code- this part must still be defined inside the target page.

Secondly, on the target page where you wish the menu to be added to, create a blank DIV and give it a unique ID attribute as well. The script will put the menu inside this DIV:

<div id="menuarea"></div>

Still on the target page, inside your initialization code, you would define the "filesetting" option that contains the path to the external file, plus the ID of the blank DIV on your target page in which to insert the menu into:

var mymenu=new drilldownmenu({
 menuid: 'drillmenu1',
 filesetting: {url:'drillmenufile.htm', targetElement:'menuarea'},
 breadcrumbid: 'drillcrumb',
 persist: {enable: true, overrideselectedul: true}
})

Here's the result:

Table Of Contents

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

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post