/************************* Expanding Menu ************************* 2-level DHTML navigation menu. The menu toggles superlink display of sublinks, with specialized styles, and passes individualized responses to menu items. It can be instantiated as a single (columnar) clamshell menu or as (a horizontal navbar of) multiple drop-down menus. Can be used in conjunction with ThoughtMesh.js to enable tag-based navigation and remote content selection via pseudo-GET variables in the url. Version 4.4, modified by Jon Ippolito to fix bug in passing id as argument to respondAsIf(). UPDATE: enable processing of only a tag link. ************************** Directions for Use ********************** CREATE AN HTML MENU. Menulinks go in
s wrapped in a
, eg:
Apples
Granny Smith
Red Delicious
McIntosh
Oranges
Valencia
Navel
... CREATE HTML CONTENT. Content goes in
s with ids; this obviates annoying escaped characters in dynamically written content. Set the initial style of these
s to display: none; clicking on the items in your menu will reveal them. ADD THE SCRIPT. Include this script in the of the Web page: Then instantiate the menu with your preferences onload, eg: You can also instantiate ExpandingMenu with different ids to create multiple menus. CUSTOMIZE BEHAVIOR. The easiest approach is to set useDefaultContentManagement to true when you instantiate the menu. This option requires: * Menu ids are associated by hyphens, eg the "apples-red" menulink is a child of the "apples" category. * Content ids must look like "content-apples", "content-apples-granny", etc. If you prefer to customize ids and behaviors, set useDefaultContentManagement to false and use these methods: * associateChildren() * associateContent() * setInitialCondition() To trigger menu actions from other links, you currently have to use this (clumsy) approach: document.getElementById( "menulink-fun-3" ).menuItem.respond( { menuItemEle: document.getElementById( "menulink-fun-3" ) } ) [UPGRADE: Simplify this.] STYLE THE MENU. You can customize these classnames for menu items in your stylesheet: "menulink-bachelor-unselected" "menulink-bachelor-selected" "menulink-parent-collapsed-unselected" "menulink-parent-collapsed-selected" "menulink-parent-expanded-unselected" "menulink-parent-expanded-selected" "menulink-child-unselected" "menulink-child-selected" Note that some styles must currently hard-coded into setMenuResponse(). [UPGRADE: extract styles from ExpandingMenu.js.] ENABLE REMOTE CONTENT SELECTION. You can enable lexia selection via anchors in the url (eg, http://mysite.com/index.html#introduction). You can also enable tag selection via the url when ThoughtMesh is active (eg, http://mysite.com/index.html?community&defect#introduction ) ENABLE PRINTING. Requires this file: You must also put an empty file in the directory called empty.html to print. Styles are assumed to be in a file called tech/print.css. ENABLE DEBUGGING. Link to the script debug.js by Jon Ippolito from your HTML file, and follow its instructions to open a debugging window. *************************************************************************/ // Test for debugging script, and disable the debug function if not found. if (typeof isDebugOn == "undefined") { debug = function() {} ; // Do nothing. debugIsOn = false ; } function MenuItem(argsObj) { // {htmlElement:document.getElementById("myListElement"), responseFunction:myFunction} this.htmlElement = argsObj.htmlElement; this.responseFunction = (argsObj.responseFunction)? argsObj.responseFunction : "none" ; this.htmlElement.style.display = "block"; this.htmlElement.onclick = this.respond ; this.htmlElement.menuItem = this ; this.linkType = "bachelor" ; // Default--to be modified later based on associateChildren calls. this.htmlElement.onmouseover = actOnMouseover ; this.htmlElement.onmouseout = actOnMouseout ; } function actOnMouseover(e) { return eval( this.menuItem.funMouseover ) ; } function actOnMouseout(e) { return eval( this.menuItem.funMouseout ) ; } MenuItem.prototype.setClasses = function(classObj) { this.funMouseover = classObj.argMouseover; this.funMouseout = classObj.argMouseout; this.classBachelorUnselected = classObj.argBachelorUnselected ; this.classBachelorSelected = classObj.argBachelorSelected ; if (this.htmlElement.menu.isTwoLevelMenu) { // This argument can be omitted for 1-level menus. this.classParentCollapsedUnselected = classObj.argParentCollapsedUnselected ; this.classParentCollapsedSelected = classObj.argParentCollapsedSelected ; this.classParentExpandedUnselected = classObj.argParentExpandedUnselected ; this.classParentExpandedSelected = classObj.argParentExpandedSelected ; this.classChildUnselected = classObj.argChildUnselected ; this.classChildSelected = classObj.argChildSelected ; } /* UPGRADE: DO FOLLOWING LATER...MAYBE. //You only have to set the selections you want; otherwise they default to the last defined one. if (classObj.selected0) { this.classSelected0 = classObj.selected0; this.classSelected1 = classObj.selected0; if (classObj.selected1) { this.classSelected1 = classObj.selected1; } } */ } MenuItem.prototype.associateContent = function(contentEle){ // "this" is the JS object whose name is the same as the id for the menulink in question. this.content = contentEle ; // The content div (htmlElement) associated with that menulink. this.content.menuItem = this ; // Allows you to identify link if you know the content. // UPGRADE: Is it a problem that it's the same name as the handle to the menuItem object from the menuItem htmlElement? } MenuItem.prototype.associateChildren = function(childrenArr) { //[petMenu.itemManager.itemDante , petMenu.itemManager.itemCritter] this.linkType = "parent" ; // .children is an array of JS menuItem objects. // You cannot simply assign one array to be equal to another--you must write it out in a loop. // I'm trying to write this so you can call associateChildren more than once for the same parent. if (!this.children) this.children = new Array() ; for (var childNum=0; childNum