Class NF.widget.menu
Create or convert existing HTML lists and pure CSS navigation menus to enhanced scripted widgets on the fly. Operates on any hierarchial HTML based tag
concept or combination of nested concepts such as unordered lists, definition lists, divs, and more.
Seemlesly switch control from pure CSS to the widget. Apply a wealth of timing, design, animation, and node manipulation features.
The menu object uses NF.widget.hierStructure to access and control the menu structure Nodes. When a new instance of the menu class is constructed the object
is registered with NF.widget.menuManager. Methods for manipulating nodes are available in both the menuManager and hierStructure classes.
Constructor
NF.widget.menu
(
rootNode
,
config
)
- Parameters:
-
rootNode
<Node | HTML string | Node ID>
The root node of the menu. Pass the parameter a Node, the id of a Node, or an HTML string.
-
config
<Object>
Object literal specifying the configuration properties for the menu. Options include...
- {showTimerMS : int} - The time (in milliseconds) between hovering over a menu item and showing the sub menu.
- {hideTimerMS : int} - When hovering over new items this is the time (in milliseconds) required to ellapse before closing the old items sub menu.
- {itemTrigger : String | Array} - Set to ("mouseover", "click") - A string or array of strings defining the event that will trigger an active state for each level of menu items starting at menu level 0. If the menu contains more levels than the array defines, the last array item trigger will be applied to the higher levels. Default is "mouseover" for all levels.
- {menuTrigger : String | Array} - Set to ("mouseover", "click", "none") - A string or array of strings defining the event that will trigger the closing of a subs child menus (occurs when an event is fired on a main or sub container itself vs. an item). When using an array, the first item defines the main menu (level 0). If the menu contains more levels than the array defines, the last array item trigger will be applied to the higher levels. Default is the value defined using the 'itemTrigger' or 'mouseover' for all levels.
- {documentTrigger : String} - Set to ("mouseover", "click", "none") - The document level event which triggers the closing of all sub menus. Default is "mouseover".
- {collapseOnClick : Boolean} - When true any active sub menus will close after clicking on a 'nfItem' menu link.
- {stickyHover : Boolean} - When true the hover styles and item animation effects remain applied while the items child sub is visible.
Properties
The container node for the menu. This is usefull for main menu objects, for sub menu objects the container is always the same as the root node.
Object literal containing the menu configuration properties.
Methods
void
activate
(
)
Activates the menu. The following functions are performed during activation...
- The menu's interactivity and optionally, the CSS styling, is switched from pure CSS to a scripted widget.
- The root Nodes 'nfPure' className is replaced with 'nfScripted'.
- Events for running the scripted menu are attached to the structure Nodes and document Node.
- Any added replicator objects produce and render clones.
- The state of the menu at the time of activation is preserved for a seemless transition.
- Several item and sub dimensions are calculated and applied to the structure as inline styles to fix IE 6 and 7 bugs.
This method may be called multiple times, it's not an object initializer. Use it
to re-render your menu if replicators, structure nodes, or style changes warrant an update.
void
addReplicator
(
Replicator
)
Adds a replicator object to the menu. The replicator will run when calling NF.widget.menu.activate.
The replicator creates and renders clones based on the configuration paramaters of the replicator added. Multiple replicators may be added.
- Parameters:
-
Replicator
<Object>
A replicator object.
- Returns:
void
Node
getActiveItem
(
)
Get the active item Node, if any. A Item is active while its child sub menu is visible. This method returns the highest level or currently active item.
- Returns:
Node
- A Node representing the current active item.
Node
getActiveSub
(
)
Get the active sub container Node, if any. A sub is active when it's visible. This method returns the highest level or currently active sub.
- Returns:
Node
- A Node representing the current active sub.
Node
getFocusLink
(
)
Broken Fix!!!!!!!!!****************
/**
Get the current link Node with keyboard focus styles applied, if any.
- Returns:
Node
- A Node representing the focused link.
Node
getHoverLink
(
)
Broken Fix!!!!!!!!!****************
/**
Get the current link Node with mouse hover styles applied, if any.
- Returns:
Node
- A Node representing the hovered link.
Node
getInteractionItem
(
)
Get the current item recieving user interaction, if any.
- Returns:
Node
- A Node representing the item recieving user interaction.
object
getStructureNodes
(
level
)
Spiders the menu and returns an object literal containing all the sub menu and item Nodes. The returned structure Nodes can be filtered
using the level paramter. The main menu starts at level 0. Below are some examples of how to use the level parameter...
- getStructureNodes(0) - Returns the main menu root node and associated item nodes.
- getStructureNodes(1) - Returns all level 1 sub menu root nodes and associated item nodes.
- getStructureNodes("level>0") - Returns all sub nodes and associated item nodes.
- getStructureNodes("level==2 && level==3") - Returns all level 2 and 3 sub menu nodes and associated item nodes.
- Parameters:
-
level
<Int | String>
An integer representing the level or a string expression using the variable name 'level'. e.g. ("level>0").
- Returns:
object
- Object literal contining an Array of all menu container and item Nodes. {SubC:Array, Item:Array}
boolean
removeReplicator
(
Replicator
)
Removes a replicator object from the menu.
- Parameters:
-
Replicator
<Object>
A replicator object to remove.
- Returns:
boolean
- True if found and removed.
void
removeReplicatorClones
(
Replicator
)
Removes a replicators clones from the menu.
- Parameters:
-
Replicator
<Object>
A Replicator object.
- Returns:
void
Events
collapseMenu
(
event
)
Fires on a NF.widget.menu object when an event triggers the collapse of all active subs.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:object} The menu object which dispatched the event.
hideSub
(
event
)
Fires on a sub Node ('nfSubC') when hidden. If an animation is hooked to hide sub, the event is fired after the animation renders.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The Node which dispatched the event.
- {menu:object} The Nodes NF.widget.menu object.
- {subNode:Node} The parent item of the sub Node.
itemActivated
(
event
)
Fires on an item Node ('nfItem') when made active. Items become active when a child sub of the item is shown.
If an animation is hooked to show sub, activation occurs before the animation starts to play.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The Node which dispatched the event.
- {menu:object} The Nodes NF.widget.menu object.
- {subNode:Node} The sub ('nfSubC') Node which was made visible.
itemDeactivated
(
event
)
Fires on an item Node ('nfItem') when deactivated. Items deactivate when a child sub of the item is hidden.
If an animation is hooked to hide sub, deactivation occurs before the animation starts to play.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The Node which dispatched the event.
- {menu:object} The Nodes NF.widget.menu object.
linkFocusHide
(
event
)
Fires on a link Node ('nfLink') when focus styles are hidden.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The Node which dispatched the event.
- {menu:object} The Nodes NF.widget.menu object.
linkFocusShow
(
event
)
Fires on a link Node ('nfLink') when focus styles are shown.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The Node which dispatched the event.
- {menu:object} The Nodes NF.widget.menu object.
linkHoverHide
(
event
)
Fires on a link Node ('nfLink') when hover styles are hidden.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The Node which dispatched the event.
- {menu:object} The Nodes NF.widget.menu object.
linkHoverShow
(
event
)
Fires on a link Node ('nfLink') when hover styles are shown.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The Node which dispatched the event.
- {menu:object} The Nodes NF.widget.menu object.
menuRendered
(
event
)
Fires on a NF.widget.menu object when the menu is activated or updated. Rendering updates occur automatically
in response to some edits such as structural changes made through the menuManager.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:object} The menu object which dispatched the event.
- {rootNode:Node} The root node of the menu object.
replicatorCloneCreated
(
event
)
Fires when a replicator attached to the menu creates a clone for one of the menus Nodes.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The menu Node which recieved the replicated clone.
- {menu:Node} The NF.widget.menu object which the target Node belongs to.
- {replicator:Object} The NF.replicator object which created the clone.
- {clone:Object} The clone which was created.
showSub
(
event
)
Fires on a sub Node ('nfSubC') when made visible.
- Parameters:
-
event
<object>
Object literal containing the following properties...
- {type:string} The type of event.
- {target:Node} The Node which dispatched the event.
- {menu:object} The Nodes NF.widget.menu object.
- {subNode:Node} The parent item of the sub Node.