Looking for a small menu I found here a starting point (thanks to Boba of tutsvalley). A comment in that post lead me there as a complement (thanks to Jeremy Martin).
For the little web site I had to realize the menu will be horizontal with that kind of effect. My problem was that I have to deal with a multi-level menu and those two project doesn't seem to handle this aspect. I didn't try to find more information and decide to transform things the way I want, has a exercise to learn javascript/jQuery. Also as a exercise I decide to give this little work to anybody (doing this page, ...).
The source of the plugin is self documented so with the addition of appropriate tag and the use of jsdoc toolkit it's possible to obtain this. You will find in those pages a kind of class documentation. I'm not sure it's the right way to present this plugin ...but it give information on function and what they do.
As explain in the howto page this plugin transform the UL/LI list menu into a series of DIV items menu. There is perhaps a way to deal directly with the UL/LI list but I didn't find it (problem with event, with look, ... ).
The main advantage of DIV over list is that this break, in the HTML DOM, the child/parent hierarchy of embedded list. It is then more simple to show what we want. The disadvantage is that we have to reconstruct this hierarchy artificially to navigate in the menu properly.
This is done with fictitious name for class and certain id.
The class name of a item start with the string "level_". The level of this item in the tree is appended. A "_" is appended to separate the level from the parent index added at the end. The index is considered with the complete list of DIV item generated. It start at 1 for the first DIV defined, then 2 ...etc. Attention, this indexation is shifted to consider the fictitious root item with index 0. Don't confuse with the index starting with 0 for starting_item option.
The DIV's id have there one indexation starting at 0. "m" character preceed the index number in the DIV's id character string. After the initial generation, DIV parent item (folder) have the special id 'child'. During the navigation these items have there id modify to parent if there children are deployed. I know multiple id using the same name is not a good thing but it works ... with a correct append and few modification ... todo
All indexation depend on the order DIV item menu are generated. A deep first search algorithm is used. It consist in generating (so indexing) DIV from LI list item by taking the child instead of the next item. This lead to descent to the deepest level of the tree first.
This choice permit, in the plugin, to create branch of the tree easily. In the structure generation stage (branch for all context, table jqol) the plugin has just to use the jQuery add method to create a correct order list of object. From version 1.4 jQuery add method use the original order of object collection. With this deep first search algorithm items (added or not), automatically have parent before there child in the collection, even if we skip some items and/or branch during process.
A side effect of this choice is that left to right or right to left menu are possible. With the floating css styling, using left or right doesn't change the fact that the structure of a branch have first the parent and after the child.
Introduced lately it was a target from the beginning : have a way to jump to any item menu from "outside" the initialization stage of the plugin. As the little web site I was in charge was dedicated to people not having a brand new computer, IE6 was the target navigator. Placing menu look complicated to me in this context. I decide to use frames to simplify this placement problem (don't blame me, please ...). From this decision I had to look for a way to synchronize the menu in the bottom frame with the central frame content. From outside the plugin triggering custom event to target DIV item is the only solution I found.
An other point I did not make clear in the first time was witch item will be the initial selected one. Giving to the user the ability of choosing it, imply a way to jump to any item menu.
Those two things bring to these initialization and starting stuff (see options in the howto page). The function attached to the custom event "dmlhm_event_init" may be called from inside (trigger a event to initialize the selected item menu chosen with "starting_item") and outside the plugin (trigger a event on a target item menu independently of the actual status of the menu). In both case this function have to develop the correct branch to the target item and hide the the current context if necessary. It have also to re-construct the table "pind" which is necessary to define a branch path (history).
Has this function jump to a menu item, does it have to do the same action as if a user had click on that item ? This question is controlled by "do_action_when_init" and "do_href_when_init". For the first option the function simply decide (with a test of this option) to call the function "click_func_action" or not for "free" item. For the second option depending on its value the function trigger or not a click event to the link of the target DIV. This reproduce the bubbling event of a click on a DIV item menu.
Finely this function have to deal with an ambiguity. When the target option is a folder what should be seen ? The container or the content ? The parent or its child ? The option "do_child_when_init" answer this question. If 1 (default) it's the developed branch which is seen. If zero it's the target item as a leave which is shown (like in the demo page with the photo menu : the first item is a folder and it is not developed at initialization stage).
In the demo page #menu1b use this function to start with the 33 items selected.
In the real life site this function is used from outside. All pages of the central frame trigger a custom event to the menu for the items corresponding to themselves. The attached function jump to his target and do what is necessary. Below is the example of a central frame page script. Here the target is a free item selected directly by its id. The menu is in the frame 2.
Below an other example with a folder target item. Has it's id is use in many items (child) the selection process have to use eq function. The menu container id is #menuid.
Many things or perhaps nothing at all if this plugin is useless (exist elsewhere, not adapted to some stuff i'm not aware of, ...).
Don't know. For now I see :
Last modified