Difference between revisions of "Dropdown"
Jump to navigation
Jump to search
(Created page with "The dropdown menu is used in different places with slight variations. * The search pulldown in the main toolbar * The action pulldowns in section headers * The image action p...") |
|||
| Line 1: | Line 1: | ||
| − | The dropdown menu is used in different places with slight variations. | + | Menus are just being adopted, many of these ideas can change. The dropdown menu is used in different places with slight variations. |
* The search pulldown in the main toolbar | * The search pulldown in the main toolbar | ||
* The action pulldowns in section headers | * The action pulldowns in section headers | ||
| − | * The image action pulldowns over images | + | * The image action pulldowns over images |
| − | Basic structure | + | == Basic structure == |
| − | * The menu is displayed by an icon | + | * The menu is displayed by an icon in the toolbar |
| − | * On hover it | + | * On hover it is displayed negative. |
| − | ** On toolbars the icon is black, negative is a white icon in black background. The background is 100% height of the containing toolbar. | + | ** On toolbars the icon is black, negative is a white icon in black background. The background is 100% height of the containing toolbar (40x40px). |
** On an image the icon is white, negative is black on white square 30x30px. | ** On an image the icon is white, negative is black on white square 30x30px. | ||
| + | |||
| + | ===Different menus=== | ||
| + | * Basic menu with selectable rows | ||
| + | * Persistent menu for nested elements | ||
| + | * Settings panel is a flyout menu. It needs to stay visible and not disappear with mouseout. | ||
| + | |||
| + | ===Different rows=== | ||
| + | * Title row, same for all menus | ||
| + | * Row with a submenu or a link to a modal or a tool is displayed with a caret pointing right at the end of the menu item. | ||
| + | * Subselection inside dropdown row is ore instant. | ||
| + | * End row: Create item, show more, show all. One or more per row. | ||
| + | |||
| + | ===Other controls=== | ||
| + | * Long result lists can be displayed with a scrollbar | ||
Revision as of 09:47, 7 January 2019
Menus are just being adopted, many of these ideas can change. The dropdown menu is used in different places with slight variations.
- The search pulldown in the main toolbar
- The action pulldowns in section headers
- The image action pulldowns over images
Basic structure
- The menu is displayed by an icon in the toolbar
- On hover it is displayed negative.
- On toolbars the icon is black, negative is a white icon in black background. The background is 100% height of the containing toolbar (40x40px).
- On an image the icon is white, negative is black on white square 30x30px.
- Basic menu with selectable rows
- Persistent menu for nested elements
- Settings panel is a flyout menu. It needs to stay visible and not disappear with mouseout.
Different rows
- Title row, same for all menus
- Row with a submenu or a link to a modal or a tool is displayed with a caret pointing right at the end of the menu item.
- Subselection inside dropdown row is ore instant.
- End row: Create item, show more, show all. One or more per row.
Other controls
- Long result lists can be displayed with a scrollbar
