Skip to content

Latest commit

 

History

History
132 lines (101 loc) · 5.6 KB

DropDownMenu.rst

File metadata and controls

132 lines (101 loc) · 5.6 KB
Raw

dijit.DropDownMenu

Authors

Bill Keese

jsDoc

http://dojotoolkit.org/api/dijit.DropDownMenu

Introduction

The DropDownMenu widget is a vertical menu (contrast with the horizontal dijit.MenuBar <dijit/MenuBar>) that is used for:

  • drop down menu from dijit.form.ComboButton <dijit/form/ComboButton>, dijit.form.DropDownButton <dijit/form/DropDownButton>, and dijit.MenuBar <dijit/MenuBar> widgets, typically appearing below the parent widget
  • child menu spawned from another DropDownMenu (a.k.a, a nested menu), appearing to the left or right of the parent DropDownMenu
  • independent and always visible menu, typically a left-hand-side navigation menu

Items In a DropDownMenu

dijit.MenuItem <dijit/MenuItem> widgets are the actual items in the menu.

dijit.CheckedMenuItem <dijit/CheckedMenuItem> widgets are like dijit.MenuItem <dijit/MenuItem> widgets, but can be clicked to change between a checked and unchecked state.

The dijit.PopupMenuItem <dijit/PopupMenuItem> is like a dijit.MenuItem <dijit/MenuItem>, but when clicked displays a submenu or other widget to the right or left. A dijit.PopupMenuItem <dijit/PopupMenuItem> always has two child nodes: a tag with the displayed label (usually in a SPAN tag), and a widget to be popped up, typically another dijit.DropDownMenu widget.

dijit.MenuSeparator <dijit/MenuSeparator> widgets render as horizontal lines between other DropDownMenu items.

Examples

Drop Down Menu

See the dijit.form.DropDownButton <dijit/form/DropDownButton>, dijit.form.ComboButton <dijit/form/ComboButton>, and dijit.MenuBar <dijit/MenuBar> pages for examples of drop down menus.

Navigation Menu

The DropDownMenu widget can also be used for left-hand-side (style) navigation menus, which are functionally equivalent to MenuBar's, but appear vertically (just like a popup menu). In this case may want to modify the CSS so that the entire left hand column is one color, rather than just the Menu itself.

Usage to display a Menu statically is the same as context menus, except that you don't specify style="display: none" or contextMenuForWindow or any connect ids.

Accessibility

Keyboard

Action Key
Navigate menu items Up and down arrow keys
Activate a menu item Spacebar or enter
Open a submenu Spacebar, enter, or right arrow
Close a context menu or submenu Esc or left arrow
Close a context menu and all open submenus Tab

Implementation Notes

Focus

For a static Menu/MenuBar, focus is deferred until user clicks it, or tabs into it. Once user clicks on a Menu/MenuBar, it focuses on it, and then (as with a context menu) any mouse movement or keyboard movement (via arrow keys) will change focus.

CSS Classes

There are separate CSS classes for indicating that a MenuItem is mouse hovered (dijitMenuItemHover), and to indicate which MenuItem is selected/active (dijitMenuItemSelected). In tundra/nihilo/soria they look exactly the same, although that could be customized by a user, including removing the hover effect altogether.

"Selected/active" is in the sense of the selected tab, and is controlled by the mouse or keyboard. Implementation-wise, it means that either the MenuItem has focus, or focus is on a submenu of that MenuItem.

The Menu/MenuBar domNode has a dijitMenuPassive/dijitMenuActive class so that CSS rules for hover can be customized based on whether or not the menu has focus. Once the menu gets focus the dijitMenuHover effect is disabled in favor of the dijitMenuSelected effect, so that the dijitMenuHover effect won't linger on "File" if user moved the mouse over "File" but then used the keyboard arrows to move to the "Edit" MenuBarItem. (This is a setting in tundra/nihilo/soria and can be changed if desired.)