It deal with the idea that a standard HTML menu made of UL/LI/A tag (list menu) may be seen as a tree (not so original ;-)). The root of this tree is a fictitious menu items and all menu item of the list are leaves of that tree. The branch is the relation between a list item and the sub list embedded in it. This special list item may be seen as a folder containing other items. The branch may also be seen as a hierarchical link between a parent (list item) and a group of child (sub list embedded in the parent). Using this tree, it's possible to minimize the information to be display to a user by showing only the branch leading to a group of leaves (sub-menu) hiding all other leaves and branch.
Using this relative shorter list of information the plugin will display horizontally items menu.
To do so it transform the list in a series of DIV containing the original link. This DIV items menu are all hidden and the plugin show only the appropriate ones : the sub-menu and it's parent.
For the first list menu the root item (parent) is not shown as it is factious. This list is considered as the first level in the tree.
When the user click on a folder item the plugin hide all leaves of that level except the clicked one and show it's child. We are a level down in the tree. The clicked item is attributed a "parents" class (see class styling) and stay on the left. The same process is use if the user click in a new folder on that new level. The branch are now visible as a series of parent items starting from the upper level (extreme left) to the actual level.
If the user click on a parent (at any level), the plugin hide all item of the current level and show the item of the same level as the clicked one and it's parents (if any).The "parents" class attribute is remove at the same time.
If the user click on a terminal leave (no branch attached to it, no child, called also "free" in those pages), the plugin just change its class to "selected" (see class styling) and do the action defined by the click_func_action. The click event is propagated to the link. So the menu do what originally the list definition prone to do. This item becomes the selected item in term of animation.
The plugin mix with all this showing, hiding and changing class a animation :
If interested by a more detailed explanation on some points see the technical page.
For menus the standard use is to define UL/LI tags with anchors inside. Here is a HTML source example corresponding to the first menus of the demo page.
To be used with DMLHM you have to put this lines inside a DIV container with a id. This attribute is mandatory as the plugin explicitly use the id to collect information.
Then you have to handle the Javascript/jQuery stuff to transform this standard menu with DMLHM.
Three part have to be included in the HEAD section of the page :
In the demo page it is done with files :
In menu.js you put at least these instructions :
"selector to your menu" is the standard selector of jQuery library. It doesn't make sense to select any thing else then DIV containing menu ! In the demo page the first two menu are selected with their class attribute and the others by there id attribute. Remember that the mode of selection doesn't change the fact that all these menu have a id attribute has the plugin need it.
The plugin have default options. They may easily be modified. There is two way to do so :
If used together the argument has precedence on public object.
Here is a setting example with option "css" :
Below is a table of all available options with there defaults values :
| Name | Default value | Description |
|---|---|---|
| click_func_action | function (){} | It define default action function for click event (for now only used by "free" item (no folder)). |
| css | 1 | If it is set to 1 the plugin use css to fix min_width. Otherwise if it is set to 0 the value defined by "min_width" is used. |
| dmlhm_event_init | 'init_event' | It define default name for dmlhm custom event. Initializing the starting item is attached to this event. This event may be use to select a arbitrary item by the user/code after initialization of the menu (see the technical page for more information). The name of this event may be change with this option if 'init_event' is already use by one of your custom event witch you want to attache to DIV item menu generated by dmlhm. |
| do_action_when_init | 0 | If it is set to 1 "click_func_action" is used for "free" initialized item. Otherwise if it is set to 0 the function is not used. See the technical page for more information. |
| do_child_when_init | 1 | If it is set to 1, any folder which is initialized (init_event) is deployed. Otherwise if it is set to 0 the folder is not deployed. See the technical page for more information. |
| do_href_when_init | 0 | If it is set to 1 the link of initialized item is take into account. Otherwise if it is set to 0 the link is not used. See the technical page for more information. |
| max_width | 250 | It define the maximum "width" of a menu item. |
| min_width | 150 | It define the minimum width of a menu item |
| min_width_abs | 5 | It define the absolute minimum width of an menu item |
| speed_menu | 900 | It define the speed of the animation (mainly mouse hover/out on menu items) in milliseconds. |
| speed_menu_hide | 1500 | It define speed in milliseconds for menu level to hide (expected to be faster then show => less then speed_menu_show). |
| speed_menu_show | 2000 | It define the speed in milliseconds for menu level to show. |
| starting_item | 0 |
It define the default starting item to be selected. It may be any menu item. The value is the index of the chosen items : 0 represent the first LI in the menu 1 the second one ... If a LI is a folder (having UL/LI list inside) you have to increment by using child item first (deep first search algorithm). |
Here is the demo page file "menu.js" as example :
The menu generated by dmlhm behave correctly if the following styling rules are use.
The DIV container must have hidden for overflow directive. This will permit movement of DIV items outside the visible part of the menu when in a narrow container :
A illustration is given bellow for a DIV container with id "mycontainer".In general position and size of the menu is defined here.
All DIV items must be floating to the left (or the right if you want to). This is important to get item menu inline.
All DIV items must have hidden for overflow directive. Otherwise it certainly be the mess with scroll bar.
All DIV items must have a height defined to force a constant size for the menu look. This condition may be relaxed like in the last menu of the demo page. In any case this will influence the way items will float around and how there contains will appear.
All DIV items must be undisplayed (display none). It's the plugin which show or not part of these DIVs.
A illustration is given bellow. The surrounding box (if you want one) is defined here also. The text-align is important to get a content centered.
Naturally the width is also defined here. It may be use or not by the plugin (see css option)
In this example the display directive is alone. If in the future the plugin handle this feature by itself it will be simple then to remove this directive.
All link of menu item must be displayed as a block. This is necessary to fix a width to it.
All link of menu item must have a width of 100%. There width size are then the width of the DIV item menu which contains them. The plugin control the size of the DIV item, so with this 100% it control also the size of the link.
Below a example of anchor styling.
In all test done so far with this plugin the decoration style (colors) has been set to the link element. It may not be necessary. It may be applicable at the DIV item level. To test...
Anyway two class are important for dmlhm.
The "selected" correspond to the active target controlled by the menu. A items become select when clicked.
"parents" is the class affected by the plugin to item which are folder and part of the branch (tree menu representation) leading to this sub-menu
This below are colors completing the ones given above for those two status (class).
To complete the style of the "parent" item here is the little arrows image defined here at the DIV item level
Last modified
