Mega menu functionality is provided by the following four widgets.
idx.oneui.MenuBar
This widget is an an enhanced version of dijit.MenuBar that provides trigger-on-hover functionality.
Properties
- openOnHover: true (default) if hover will trigger the opening of popup items.
idx.oneui.MenuDialog
This widget is the main container for rich mega-menu content. Instances can be supplied as the "popup" parameter for dijit.PopupMenuItem and dijit.PopupMenuBarItem, and will work "as expected". Instances can also operate as popup menus on arbitrary DOM nodes, or for the whole window. Instances can display with a thick border and shark fin to connect to the initiating element or with a thinner border and no shark fin and abutting the initiating element. Instances behave as content panes, and HTML and dijits may be laid out within them. If an idx.oneui.Menu instance with "menuForDialog" set to true is included within the layout, the menu dialog will operate as a drop-down menu in combination with the contained menu.
Properties
- useConnector: true if a sharkfin connector is to be shown connecting the dialog to the initiating element.
- hoverToOpen: specifies whether hover will trigger popup (unless overridden at bind time).
- isShowingNow true when visible, false otherwise. Set to true in onOpen and set to false in onClose.
- leftClickToOpen specifies whether left click or right click will trigger popup (unless overridden at bind time).
- parentMenu identifies menu which opened me, when used as a drop-down/cascade.
- popupPosition position to use for popup bindings unless overridden at bind time.
- targetNodeIds array of node ids to be bound for popup at creation time.
Methods
- bindDomNode Register a DOM node to act as a popup trigger. Parameters include: trigger DOM node, around node (defaults to trigger node), orientation (defaults to popupPosition), leftClickToOpen (defaults to leftClickToOpen), hoverToOpen (defaults to hoverToOpen).
- onCancel To be called when the menu is to be dismissed.
- onClose This method is called whenever the menu dialog is hidden.
- onExecute To be called when an action within the menu is activated.
- onOpen This method is called with then the menu dialog is shown.
- unbindDomNode Deregister a DOM node as a popup trigger.
idx.oneui.Menu
This widget is an enhanced version of dijit.Menu that provides trigger-on-hover functionality, can be used inside an idx.oneui.MenuDialog to provide cascade menu behaviour, and provides multi-column menu support including keyboard navigation. Instances can be supplied as the "popup" parameter for dijit.PopupMenuItem and dijit.PopupMenuBarItem, and will operate as dijit.Menu does. Instances can operate as popup menus on arbitrary DOM nodes, or for the whole window, and will operate as dijit.Menu does. Instances can be placed "flat" within a layout in the UI, and will operate as dijit.Menu does, except that cascade-on-hover behaviour is available. Instances can be placed within an idx.oneui.MenuDialog and act as a cascading menu in conjunction with the containing idx.oneui.MenuDialog unless "menuForDialog" is set to false.
When menu items are added to this widget, the "column" property on each item can be used to specify the column in which the item should be placed. Columns will be created as needed to accommodate each new item.
Properties
- columnNodes: an array of the DOM nodes which provide the multiple columns containing the menu items.
- openOnHover true (default) if hover will trigger the opening of popup items.
- menuForDialog true (default) if this menu should be used by a containing idx.oneui.MenuDialog in order to provide the primary menu functionality.
idx.oneui.MenuHeading
This widget is an enhanced version of dijit.MenuSeparator that provides textual headings between menu items instead of a simple line separator.
Properties
- label text (and markup) to display in the item.