Here is the standard menu from witch we start from :
It becomes this with dmlhm and appropriate css styling :
or this if we narrow the DIV used as container :
or this if the starting item is different from the default first level, first item (it's only the starting status witch change here)
or this if you are in a country where you read from right to left (or you want to change from ltr) (here changes haven't been made to the original menu list as it doesn't make sense in english,only style directive have been changed) :
You can click on these menus above an see that for "free" items a message is printed below. This illustrate extra action that can be added to a "free" menu item. This action don't replace the normal href action of the initials links. By default this extra action is disabled.
You can try to resize the browser window. It will change container size. The plugin calculate for this new container's dimension the sizes of each items depending on the context (selected, mouse-enter, far or close from selected ...)
At some point the plugin will fire an alert message if the container becomes to small to display a reasonable menu. The smallest container will alert first. And the bigger ones after.
It's also possible with css styling to obtain this kind of menu :
Or starting from a menu with images :
This last menu use free height for DIV item menu but fixed, image and DIV container, height. It's just to illustrate the floating behaviour used for the style. During transition you see that items are passing bellow. Without proper styling the menu expand vertically instead of hiding at the right.
All explanation on how to use this plugin and some explanation on how this page is done may be find in the howto page.
More explanation on implementation may be find in the technical page.
A real life utilisation of this plugin may be find here. It illustrate the use of custom event to synchronize the menu with it's target link between frames.
Images used in this page may be find here.
Last modified
