Mega menu functionality is not implememted as a single widget, but rather as a set of 4 widgets that closely parallel and integrate with the existing dijit widgets that are used to implement menus. The 4 widgets are:

Mega menu content

Including arbitrary dialog content in a menu

The key to being able to include arbitrary dialog content in a menu is to use an idx.oneui.MenuDialog rather than a dijit.Menu. Instead of being a container that accepts only menu items, MenuDialog is a container that functions like a ContentPane and accepts arbitrary dialog content. As a consequence, it does not accept menu items directly, but a menu can (and often is) inserted into it as one of the dialog elements (see next section).

So, the example on the overview page creates the 'Communities' mega menu like this:

<div data-dojo-type="idx.oneui.MenuBar" id="overview_menu">
  <div data-dojo-type="dijit.PopupMenuBarItem">
    <span>Communities</span>
    <div data-dojo-type="idx.oneui.MenuDialog">
      <!-- Arbitrary communities mega menu content -->
    </div>
  </div>
</div>

If the user interacts with an element in a mega menu other than a idx.oneui.Menu (see below) such that an action is triggered that should close or cancel the menu then the client code should call either onExecute() or onCancel() to notify the dijit menu framework appropriately and to get the menu closed. onExecute() indicates that the user has initiated an action from the mega menu, and will dismiss the menu and any menus it may have cascaded from. onCancel() will close the particular mega menu but not any previous ones that it may have cascaded from. E.g.

<div data-dojo-type="idx.oneui.MenuDialog">
    ...
  <button onclick="dijit.getEnclosingWidget(this).onExecute();">Submit</button>
  <button onclick="dijit.getEnclosingWidget(this).onCancel();">Cancel</button>
    ...
</div>

To facilitate initialization and cleanup, client code can connect to onOpen() and onClose() methods of an idx.oneui.MenuDialog. The normal dialog reset() method is also called every time an idx.oneui.MenuDialog is shown. E.g.

<div data-dojo-type="idx.oneui.MenuDialog" reset="dojo.byId('field_1').value = 'Field #1 initial value';">
    ...
  Field #1: <input id="field_1" type="text" name="field_1" value="Field #1 initial value"/>
    ...
</div>

Incorporating a menu into a mega menu

Since the primary purpose of a mega menu is to act as a menu, albeit one with significant extra functionality and UI features, then being able to include a menu and menu items within the mega menu is fundamental. The easiest way to do this is to add a single idx.oneui.Menu as one of the children of the idx.oneui.MenuDialog, and insert menu items into it.

So, the example on the overview page creates the menu functionality of the 'Communities' mega menu like this:

<div data-dojo-type="idx.oneui.MenuDialog">
  <div style="padding: 1.5em 1em 1em 1em;">
    <b>Communities</b>
    <a style="margin-left: 2em;" href="javascript:"><b>I'm a Member</b></a>
    <a style="margin-left: 2em;" href="javascript:"><b>I'm an Owner</b></a>
    <a style="margin-left: 2em;" href="javascript:"><b>I'm Following</b></a>
  </div>

  <div style="padding: 0px 1em 0.75em 1em;" class="communities-search">
    <span style="color: #7f7f7f;">Search:</span> 
    <input data-dojo-type="dijit.form.TextBox" />
    <input data-dojo-type="dijit.form.Button" data-dojo-props="iconClass: 'idxHeaderSearchButton', label: 'Search', showLabel: false" />
  </div>

  <div data-dojo-type="idx.oneui.Menu" class="menu-communities">
    <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 0, iconClass: 'mi-communities-icon-greenwell'">
      <span class="mi-communities-name">Greenwell Partnership</span><br />
      <span class="mi-communities-note'">Updated by Dan Misawa 10:28 AM</span>
    </div>
    <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 0, iconClass: 'mi-communities-icon-nightowl'">
      <span class="mi-communities-name">Night Owl Brainstorming</span><br />
      <span class="mi-communities-note'">Updated by Mickey Parky 7/19/11</span>
    </div>
    <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 0, iconClass: 'mi-communities-icon-lagunitas'">
      <span class="mi-communities-name">Lagunitas Maximus</span><br />
      <span class="mi-communities-note'">Updated by Boris Blade 7/12/11</span>
    </div>
    <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 0, iconClass: 'mi-communities-icon-creative'">
      <span class="mi-communities-name">Creative Brainstorming</span><br />
      <span class="mi-communities-note'">Updated by Vince Driver 7/9/11</span>
    </div>
    <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 1, iconClass: 'mi-communities-icon-carpool'">
      <span class="mi-communities-name">Car Pool Initiative</span><br />
      <span class="mi-communities-note'">Updated by Frankie Four 9:17 AM</span>
    </div>
    <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 1, iconClass: 'mi-communities-icon-night'">
      <span class="mi-communities-name">Night courses</span><br />
      <span class="mi-communities-note'">Updated by Tony Bullet 7/14/11</span>
    </div>
    <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 1, iconClass: 'mi-communities-icon-efa'">
      <span class="mi-communities-name">Economic fluctuations assessment</span><br />
      <span class="mi-communities-note'">Updated by Doug Head 7/11/11</span>
    </div>
    <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 1, iconClass: 'mi-communities-icon-uxld'">
      <span class="mi-communities-name">UX Lab Directives</span><br />
      <span class="mi-communities-note'">Updated by Samantha Daryn 7/8/11</span>
    </div>
  </div>

  <div style="padding: 0.75em 1em 1em 1em;">
    <span style="color: #7f7f7f; margin-right: 1.5em;">Showing 8 most recently updated of 57</span>
    <a href="javascript:"><b>View All</b></a>
  </div>			
</div>

There are several things to note about this behaviour:

Using multiple columns of menu items

The idx.oneui.Menu widgets supports organising menu items into multiple columns. A menu item is allocated to a column simply by setting a "column" property on it. The idx.oneui.Menu widget creates columns as needed. Empty columns are allowed, and column numbering starts from 0.

So, the example on the overview page allocates menu items to columns in the 'Communities' mega menu like this:

<div data-dojo-type="idx.oneui.Menu" class="menu-communities">
  <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 0, iconClass: 'mi-communities-icon-greenwell'">
    <span class="mi-communities-name">Greenwell Partnership</span><br />
    <span class="mi-communities-note'">Updated by Dan Misawa 10:28 AM</span>
  </div>
  <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 0, iconClass: 'mi-communities-icon-nightowl'">
    <span class="mi-communities-name">Night Owl Brainstorming</span><br />
    <span class="mi-communities-note'">Updated by Mickey Parky 7/19/11</span>
  </div>
  <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 0, iconClass: 'mi-communities-icon-lagunitas'">
    <span class="mi-communities-name">Lagunitas Maximus</span><br />
    <span class="mi-communities-note'">Updated by Boris Blade 7/12/11</span>
  </div>
  <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 0, iconClass: 'mi-communities-icon-creative'">
    <span class="mi-communities-name">Creative Brainstorming</span><br />
    <span class="mi-communities-note'">Updated by Vince Driver 7/9/11</span>
  </div>
  <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 1, iconClass: 'mi-communities-icon-carpool'">
    <span class="mi-communities-name">Car Pool Initiative</span><br />
    <span class="mi-communities-note'">Updated by Frankie Four 9:17 AM</span>
  </div>
  <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 1, iconClass: 'mi-communities-icon-night'">
    <span class="mi-communities-name">Night courses</span><br />
    <span class="mi-communities-note'">Updated by Tony Bullet 7/14/11</span>
  </div>
  <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 1, iconClass: 'mi-communities-icon-efa'">
    <span class="mi-communities-name">Economic fluctuations assessment</span><br />
    <span class="mi-communities-note'">Updated by Doug Head 7/11/11</span>
  </div>
  <div data-dojo-type="dijit.MenuItem" onclick="fire();" data-dojo-props="column: 1, iconClass: 'mi-communities-icon-uxld'">
    <span class="mi-communities-name">UX Lab Directives</span><br />
    <span class="mi-communities-note'">Updated by Samantha Daryn 7/8/11</span>
  </div>
</div>

Individual columns in a multi-column menu can be styled programmatically by using the columnNodes property of idx.oneui.Menus, which returns an array of DOMNodes that are suitable for applying styles to in order to style individual columns.

Including menu headings

Headings can be inserted between menu items using the idx.oneui.MenuHeading widget. This is a subclass of dijit.MenuSeparator that allows the display of non-clickable text instead of the separator line. For example:

<div data-dojo-type="idx.oneui.Menu">
  <div data-dojo-type="idx.oneui.MenuHeading" data-dojo-props="column:'0',label:'Column #0'"></div>
    ...
</div>

Using mega menus with the One UI Header

idx.oneui.Menus and idx.oneui.MenuDialogs can be used as drop-down menus from idx.oneui.MenuBars that are incorporated into a idx.oneui.Header.

Using an idx.oneui.MenuBar instead of a regular dijit.MenuBar provides open on hover support.

A specific application of mega menus within a Header is they can be used to provide a designated message area in a header. See: Messaging

Using mega menus as pop-up or drop-down menus from other page elements

Because idx.oneui.Menus and idx.oneui.MenuBars are subclasses of the corresponding dijit widgets then they can be incorporated into pages in the same way that the dijit versions can in order to provide static, flat menus and menu bars.

idx.oneui.MenuDialogs and idx.oneui.Menus can also be used as drop-down menus for arbitrary page elements such as buttons, a left-nav, etc. For example, to create a MenuDialog that drops down from a button:

<button id="trigger_element">
  Hover here to open drop-down menu
</button>
<div style="display:none" data-dojo-type="idx.oneui.MenuDialog" data-dojo-props="targetNodeIds:['trigger_element'], leftClickToOpen:true">
  <h3>Popup idx.oneui.MenuDialog</h3>
  <p>
    ...with arbitrary dialog content
  </p>
</div>

Note that:

MenuDialogs can also behave like popup context menus. Setting the leftClickToOpen property to false causes them to be positioned relative to the pointer and trigger via a right mouse click, just like a context menu.

Finally, MenuDialogs can also be made to appear visually like TooltipDialogs by setting the useConnector property to true.

Cascading mega menus

idx.oneui.Menus and idx.oneui.MenuDialogs can be used as cascade menus from:

When used in this way they will participate in the menu cascade or chain of popups as expected. For example, if a menu item is selected the whole chain of cascaded menus will automatically close, or if a popup is cancelled that popup will close, leaving the rest of the chain visible.

Additional points of note

Since idx.oneui.MenuHeadings are simply textual versions of dijit.Separators then they can be used anywhere a regular dijit.Separator can, including in regular dijit.Menus.

Similarly, since idx.oneui.Menus are subclasses of dijit.Menu then they can also be used anywhere a regular dijit.Menu can, including with regular dijit.MenuBars. The main advantage of doing this is that they will still provide multi-column functionality (without supporting arbitrary dialog content, as this is provided by idx.oneui.MenuDialog).

Also similarly, since idx.oneui.MenuBars are subclasses of dijit.MenuBar then they can also be used anywhere a regular dijit.MenuBar can. The main advantage of doing this is that they will provide trigger on hover functionality.

An idx.oneui._EventTriggerMixin is provided that can be used as a mixin class when developing other widgets that need to be triggered by a combination of mouse and/or keyboard events.