The following example shows a header containing several mega menus.
The following controls show drop-down and pop-up mega menus.
Notes on these examples:
- The navigation items are supplied to the header above using an idx.oneui.MenuBar widget, in order to get hover-to-open behaviour.
- The header item Menu pops up a simple menu (idx.oneui.Menu), for comparison.
- The header item Dialog pops up an idx.oneui.MenuDialog widget with some sample content
- The header item Dialog-with-menu pops up an idx.oneui.MenuDialog widget with content including an idx.oneui.Menu. The menu automatically links with the containing menu-dialog to provide normal menu behaviour (keyboard handling, focus, dismissal, accessibility).
- The header item Work items pops up an idx.oneui.Menu which includes idx.oneui.MenuHeading to provide section headings (non-selectable), and shows multi-column menu layout.
- The header item Communities adds further rich content to a multi-column menu display
- The header item Apps shows another way of using multi-column menus
- The blue area Click for a drop-down mega-menu has a mega-menu bound to it with leftClickToOpen enabled and hoverToOpen disabled, and shows a sample mega-menu (one link, to show that additional content may be included, plus a simple menu) operating as a drop-down from an arbitrary element in the page. The menu will drop down if possible, or "drop" upwards if there is insufficient room below.
- The blue area Hover for a tooltip mega-menu has a mega-menu bound to it with useConnector enabled, and shows a sample mega-menu (one link, to show that additional content may be included, plus a simple menu) operating as a hover-triggered tooltip from an arbitrary element in the page. The menu will appear above the mouse position if possible, or below if there is insufficient room above.
- The blue area Right-click for a context mega-menu has a mega-menu bound to it with hoverToOpen disabled, and shows a sample mega-menu (one link, to show that additional content may be included, plus a simple menu) operating as a popup/context menu from an arbitrary element in the page. The menu will appear diagnoally up-right from the mouse if possible, or successively up-left, down-right and down-left if there is insufficient room.