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:
This script consists of an index page plus several supplementary pages:
|