Menu


 

type: widget

release: 1.9

status: released

documentation: http://api.jqueryui.com/menu/

demo: http://jqueryui.com/menu/

 

 


 

1 - Description:

 

Transforms any set of nested elements into a themeable menu with mouse and keyboard interactions for navigation.

 

NOTE: numbers in brackets reference visual designs.

 

Flat, non-hierarchical list (default when there are no nested lists)

 

 

Hierarchical list:

 

 

 

Split buttons

Users should have the option to create split-buttons for any menu option, where the left button selects the node and the right button opens a sub-menu.  The original design only spec'd split buttons for ipod style menu, but this could be useful to show link affordance in fly-outs as well.

 

Check and radio options

 

Custom icons [D5]

Users could also specify unique icons that appear next to particular menu options.

 

Dividers

 

Sub-menu indicator arrows and icon alignment [D4]

 

As decribed in the first paragraph, the behaviour/mode of the menu can be set to the following (the option for this is called 'mode'):

 

 

 

One thing to consider for the grid (and many other future UI plugins) is that HTML 5 provides detailed specs for these widgets that we should seriously consider using as a blueprint for our plugins. If we shared similiar naming and conventions, it will provide a cleaner interface in the future when we all have to support both the HTML 5 version (where available) and the JS-based UI plugin verison on the same site (i.e. use the native HTML 5 if availble, fall back to JS if not supported).  The other benefit is that these specs have been refined by a large group of people so they are fairly mature and there may be no need to reinvent the wheel. There is a menu spec here:

http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#menus

 

Many, many jQuery menu plugins already exist that we may be able to mine for ideas, or use as the basis for the jQuery widget.  Several are listed below, but there may be others that look as/more promising (feel free to add to or edit this list):

 

Single or multi-level menus (dropdown, flyout, ipod-style)

 

Context menu

 

Enhance standard <select> into menu

http://www.givainc.com/labs/linkselect_jquery_plugin.htm

 

Filament flyout and iPod menus with ARIA and CSS framework support:

http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

http://www.filamentgroup.com/examples/menus/index.html

http://filamentgroup.com/examples/menus/ipod.php

 

iOS-Style menu build on jQuery UI 1.9's menu widget:

http://jamesarosen.github.com/jquery-ui/demos/menu/ios-menu.html  

 

Themeroller-based drilldown menu: http://www.matthewfeerick.com/jquery_menu/

 

For a very detailed description of menu design best practices and behavior, please review the Apple's UI guidelines for menus or Microsoft's Vista UI guide for menus.

 

Menubar ARIA example implementation that includes inputs: http://oaa-accessibility.org/examplep/menubar1/

Dojo/Dijit Menu, Menubar, Contextmenu: http://archive.dojotoolkit.org/dojo-2011-07-12/dojotoolkit/dijit/tests/test_Menu.html

 

Complex navigation patterns for responsive design: http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/


 

2 - Visual Design:

 

 

 


 

3 - Functional Specifications/Requirements:

 

Keyboard

 

Accessibility

 

 

There is no API for binding data to each item that menu provides. Instead, jQuery's data API can be used to bind whatever necessary to each menu item and retrieve that within the select-event via ui.item. Autocomplete does exactly that.

 

Delaying opening and closing submenus

When hovering a menu item with a submenu, slightly (200-300ms) delay opening the submenu. Close open (sibling) submenus when opening another submenu.

Implementation-wise: Start a timeout on mouseover. Clear the timeout on mouseout. When it executes, close open submenu and open the new submenu.

 

Icons

Icons are supported by adding a class of ui-menu-icons to the menu element, which happens automatically when there is an element within the menu with the class ui-icon. The ui-menu-icons class adds some padding to the left to offset menu items (with or without icon). The icon generated for submenus isn't affected and will continue to be positioned on the right.

 


 

4 - Markup & Style:

 

(only used prior to implementation) 

 


 

5 - Latest version of plugin:

http://view.jqueryui.com/master/demos/menu/default.html

 


 

6 - Open issues being discussed 

 

API Challenges

 

While working on the iOS-style version of the menu, I found I needed to redefine several key methods:

 

In general, this can all be overcome by splitting out behavior into smaller helper methods that are configurable via options(). I rather like the SproutCore- and Cocoa style of willFoo() and didFoo() callbacks. For example, we could add a willMoveLeft(event, parent, child) and didMoveLeft(event, parent, child) callbacks. If willMoveLeft returns false, the move is cancelled. [James]

 

The jQuery UI pattern for naming cancelable and notification events (like this) is beforemoveleft and moveleft. For example, see Dialog's beforeclose and close. [Richard]

 

@James: Can you look into splitting out the internal functionality of the existing methods into smaller methods so you can just override the individual parts you care about? For example, you could move the position/show code into its own function and change that to do the positioning and sliding. You can also look at the custom tooltip animation demo (see the open event example) to see how the animations for menu might be possible even without refactoring the base menu. For the back button, can you add a header above the menu and put the back button up there? That would be more like the iOS implementation. [Scott]

 

Issue where mouseover of the menu to open submenus does not allow for keyboard navigation of the menu or submenus

 

 

Inputs Menu

 

All work for input menu has been moved to an extension here https://github.com/kborchers/jquery-ui-extensions/tree/master/menu with a demo here http://kborchers.github.com/jquery-ui-extensions/menu/inputmenu.html