Configuring the contextmenu as a dropdown "suckerfish" menu (not recommended usability-wise).
The menu can be easily configured as a horizontal or vertical dropdown menu.
The two mainmenus on this page are simple unordered lists.
Each of the links in a mainmenu is bound to a unique contextmenu which acts as the submenu.
The horizontal menu is configured with the following options (among others):
- openBelowContext: true, this causes the contextmenu to open at the lowerleft corner of the context.
- event: mouseover, this is the event used to open the menu, i.e. hovering over the mainmenu items.
- ignoreHeightOverflow: true, setting this to true causes height(y) overflow to be ignored. We don't want overflowing submenus overlapping our mainmenu.
- fadeIn: 0, using fadeIn times bigger than 0 can cause multiple submenus to appear when moving rapidly from mainmenu item to mainmenu item.
- autoHide: true, setting autoHide to true causes the whole menu to hide when the mouse pointer exits the menu. Notice that the menu doesn't automatically hide when moving the mouse from a mainmenu item to the area above/left from the mainmenu. This is because the mainmenu isn't actually part of the contextmenus.
The vertical menu is configured with the following options (among others):
- openBelowContext: true, same as the horizontal menu.
- event: mouseover, same as the horizontal menu.
- startLeftOffset: 170, setting openBelowContext to true causes the menu to open at the lowerleft corner of the context(mainmenu item). In this case we want the menu to open at the upperright corner of it's context, which means it needs a horizontal offset as wide as the mainmenu.
- startTopOffset: -28, same reason as startLeftOffset. We want the menu to open at the upperright corner of it's context, which means it needs a negative vertical offset as heigh as a mainmenu-item.
- fadeIn: 0, same as the horizontal menu.
- autoHide: true, same as the horizontal menu.
Dynamically added submenu items >> << Open by button