Summary
The Magnolia Menu will provide the main means for navigating AdminCentral, Magnolia's administrative interface also used to enter and structure content. It is similar to an Accordion menu, but also offers grouping of entries and somewhat enhanced behavior.
Greater picture
The Magnolia Accordion Menu is used as part of AdminCentral's main menu. The main menu offers a row of tabs for selecting the work area at the top. Selecting a tab shows a menu using the Magnolia Accordion Menu below. It may also show additional elements such as licensing information.
Description of desired behavior, Mockups
Similar to an Accordion menu, the Magnolia Accordion Menu serves a hierarchically structured set of menu items. The top-level items are visible at first. Clicking on any such item reveals its sub menu items, which in turn may contain additional sub items, which remain hidden at first. In general, sub menu items only become visible, if their parent item gets selected.
Modes of operation
The menu shall offer two modes of operation:
- Mode 1: Only one menu item open at any time
If you select the parent item, the panel showing the sub menu items slides open while possibly already visible sub menu items of another menu item slide close: only one menu item on every level may show its sub menu items at any point in time. - Mode 2: Many menu items open at any time
If you select the parent item, the panel containing its sub menu items slides open. All possibly open top-level menu items remain open. A user has to manually select an item again in order to slide it close. In mode 2, an arbitrary number of menu items may show their sub menu items at any point in time and it is up to the user to close menu items again.
AdminCentral will offer users a choice to set their preferred mode of operation. The default mode will be chosen after user testing.
Mode 1: only one item per level open at any time
Mode 2: multiple items open
Menu items
Top-level menu items show either a text or an icon and a text, but they may also show notifications. Notifications are realized using a label on a colored background and they are allowed to overlap the text and icon on the right in case of tight space requirements. Sub menu items show a text only and can't show notifications, so icons and notifications are only allowed at the top-level.
Items with or without links
A menu item may contain a link and thus cause a selection event to be sent, or it may only contain sub menu items. Clicking on the former opens the menu item and sends the event, clicking on the latter merely opens the item. When closing a menu item in mode 2, a selection event is sent as well.
Contextual help
Every menu item offers contextual help by means of a tooltip. It is being shown, if the focus stays on an item for at least two seconds. Note that the text must be configurable and will be different from the text used on the item. A tooltip may simply contain text; there's no need to support custom component or rich text content here.
Levels and visibility
The menu shall support structures up to three levels deep.
Default visibility
By default, only the first level of menu items shall be visible and all other levels hidden. The menu must be configurable, however, to expose one particular menu item already when showing up. Such a menu item shall be from any level and as a result, all parent items of such an item must be open and showing their sub menu items.
Preservation of visibility (mode 1)
Only in mode 1, opening a previously automatically closed top-level menu item again also opens all sub menu items exactly as they were before. The sub menu items are opened, if they were open before; they are closed, if they were closed before. The same applies to their sub menu items. So, in essence, opening a previously automatically closed top-level menu items shows the menu in the exact the state it was in before it was closed. This applies to everything but any focus or selection of an item.
Note that this behavior actually only has a visible effect on menus containing more than two levels. If a menu has only one or two levels, no additional sub level will have to be rendered to its previous state.
Grouping
The top-level menu may be further subdivided into menu groups. Groups are visually separated from each other and they may have an optional title label.
Please note that the one-open-item rule of mode 1 described above also holds, if the Magnolia Accordion Menu contains multiple menu groups. If the first mode of operation is active and the user selects e.g. a top-level menu item in group 3, a previously open top-level menu item in group 1 slides close.
Height
The space below the actual menu will sometimes be used by a different component; such a component should directly follow the last visible menu item. It shall thus be possible to specify the height of the component, which displays a scrollbar, if not all menu items can be visible at once.
Usage
The Magnolia Accordion Menu must support input from a mouse, a keyboard as well as from touch devices.
Focus vs. Selection
The component shall support focusing and selecting a menu item. Only selecting an item actually fires a selection event. Moving the focus shall be supported on all devices. On touch devices, you may move the focus by tap-and-holding an item, optionally moving the finger to a different item, then release it - this does not also select any item the finger is over.
A focused item is visually emphasized using a background color (default: light blue). Selecting an item highlights it as well, but with a different, darker color (default: darker shade of light blue).
Please refer to the usage summary on focusing and selecting items for an exact definition on how this shall work on the different device types. A menu item is closed in mode 2 by simply selecting it again. Support for item deselection is not required.
Keyboard navigation
Since an accordion menu intuitively can also be seen as a tree of items, the commands for navigating a tree as specified in the usage summary for the keyboard must be supported by the Magnolia Accordion Menu as well. In particular, it must be possible to open and close the items using the left and right arrow keys.
Implementation notes
Also use CSS extensively to allow styling focused, selected, open and closed items as well as the first and last item in lists.