Overview

Smart.Menu represents a custom element which can be used to choose an option from a nested list of items.

To initialize a Menu, the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for the element
  • smart.element.js – the base class
  • smart.button.js – this file contains the smart-repeat-button custom element. The scroll buttons of Smart.Menu are instances of smart-repeat-button
  • smart.menu.js – this file defines the main functionality of the Smart.Menu custom element.

The following code adds an empty menu to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.menu.js"></script> </head> <body> <smart-menu></smart-menu> </body> </html>

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

The menu structure contains smart-menu-item and smart-menu-items-group elements.

The following attributes are available for these custom elements.

  • label – the label to be displayed in the Menu
  • separator – if present, a visual separator (horizontal line) is added after the item
  • disabled – disables the selection of an item

The following attributes are only available for smart-menu-item.

  • value – a custom value that is not displayed, but is passed as an argument to the itemClick event (called when an item is chosen).
  • shortcut – a helper text/icon that can represent a keyboard shortcut that activates the item. The shortcut is not displayed for top-level items in horizontal and vertical modes.

Animated menu could be achieved when animation class is added .

 <smart-menu class="animation"></smart-menu>

Demo

The Menu and its items can have checkbox or radio button selection. To allow this the user has to set element’s checkboxes property to true and checkable for the particular items or group.

 <smart-menu checkboxes checkable></smart-menu>

Demo

Data Biding

To initialize a populated Smart.Menu custom element, insert the required inner structure consisting of the auxiliary custom elements smart-menu-item and smart-menu-items-group, e.g.:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.menu.js"></script> </head> <body> <smart-menu> <smart-menu-items-group> File <smart-menu-item shortcut="Ctrl+N">New</smart-menu-item> <smart-menu-item shortcut="Ctrl+0">Open</smart-menu-item> <smart-menu-items-group> Open Containing Folder <smart-menu-item>Explorer</smart-menu-item> <smart-menu-item>cmd</smart-menu-item> </smart-menu-items-group> <smart-menu-item shortcut="Ctrl+S" disabled>Save</smart-menu-item> <smart-menu-item shortcut="Ctrl+Alt+S" separator>Save As...</smart-menu-item> <smart-menu-item shortcut="Alt+F4">Exit</smart-menu-item> </smart-menu-items-group> <smart-menu-items-group> Help <smart-menu-item>About</smart-menu-item> <smart-menu-item>Help center</smart-menu-item> <smart-menu-item>Feedback</smart-menu-item> </smart-menu-items-group> </smart-menu> </body> </html>

Demo

Populating from UL :

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.menu.js"></script> </head> <body> <smart-menu id="menu"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <li><a href="#Education">Education</a></li> <li><a href="#Financial">Financial services</a></li> <li> Software Solutions <ul> <li><a href="#ConsumerPhoto">Consumer photo and video</a></li> <li><a href="#Mobile">Mobile</a></li> <li><a href="#RIA">Rich Internet applications</a></li> </ul> </li> <li><a href="#">All industries and solutions</a></li> </ul> </li> <li> Products <ul> <li><a href="#PCProducts">PC products</a></li> <li><a href="#MobileProducts">Mobile products</a></li> <li><a href="#AllProducts">All products</a></li> </ul> </li> <li> Support <ul> <li><a href="#SupportHome">Support home</a></li> <li><a href="#CustomerService">Customer Service</a></li> <li><a href="#KB">Knowledge base</a></li> <li><a href="#Books">Books</a></li> </ul> </li> </ul> </smart-menu> </body> </html>

Demo

Populating from dataSource.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.menu.js"></script> <script> window.onload = function () { document.querySelector('smart-menu').dataSource = [ { label: 'File', items: [ { label: 'New', shortcut: 'Ctrl+N' }, { label: 'Open', shortcut: 'Ctrl+0' }, { label: 'Open Containing Folder', items: [ { label: 'Explorer' }, { label: 'cmd' } ] }, { label: 'Save', shortcut: 'Ctrl+S', disabled: true, separator: true }, { label: 'Exit', shortcut: 'Alt+F4' } ] } ]; } </script> </head> <body> <smart-menu></smart-menu> </body> </html>

Demo

Behavior

Smart.Menu has the following choices for display mode:

  • horizontal – firs level items are displayed in a row
  • vertical – firs level items are displayed in a column
  • popup – the menu acts as a popup menu. This mode supports open and close methods
  • tree – the menu goes in tree mode. The item groups are toggled and their items or sub groups are displayed in the same container.

selectionMode property determines the item selection. Allowed values are click and mouseenter

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.menu.js"></script> </head> <body> <smart-menu selection-mode="mouseenter"> <smart-menu-items-group> File <smart-menu-item shortcut="Ctrl+N">New</smart-menu-item> <smart-menu-item shortcut="Ctrl+0">Open</smart-menu-item> <smart-menu-items-group> Open Containing Folder <smart-menu-item>Explorer</smart-menu-item> <smart-menu-item>cmd</smart-menu-item> </smart-menu-items-group> <smart-menu-item shortcut="Ctrl+S" disabled>Save</smart-menu-item> <smart-menu-item shortcut="Ctrl+Alt+S" separator>Save As...</smart-menu-item> <smart-menu-item shortcut="Alt+F4">Exit</smart-menu-item> </smart-menu-items-group> <smart-menu-items-group> Help <smart-menu-item>About</smart-menu-item> <smart-menu-item>Help center</smart-menu-item> <smart-menu-item>Feedback</smart-menu-item> </smart-menu-items-group> </smart-menu> </body> </html>

Demo

The position of the menu popups is determines by dropDownPosition property. The allowed values are:

  • top-left
  • top-right
  • bottom-left
  • bottom-right
  • overlay-left
  • overlay-right
  • auto

Manipulating the content

The element offers the following methods:

  • maximize – sets the menu to maximized mode.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.maximize();
         }
     </script>
    
  • addItem – adds new item to the menu.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.addItem(document.createElement('smart-menu-item'), '0');
         }
     </script>
    
  • close – closes the menu when mode is set to ‘popup’.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.close();
         }
     </script>
    
  • collapseItem – collapses a particular item. The id or the path to the item is passed in as the method argument.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.collapseItem('0.0');
         }
     </script>
    
  • expandItem – expands particular item. The id or the path to the item is passed in as the method argument.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.expandItem('1.2');
         }
     </script>
    
  • getItem – returns an item accroding to the desired id or numeric path.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.getItem('0.0');
         }
     </script>
    
  • checkItem – checks an item. The id or the path to the item is passed in as the method argument.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.checkItem('0.0');
         }
     </script>
    
  • minimize – minimizes the menu.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.minimize();
         }
     </script>
    
  • open – opens the menu when mode is set to ‘popup’.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.open();
         }
     </script>
    
  • removeItem – removes an item. The id or the path to the item is passed in as the method argument.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.removeItem('0.0');
         }
     </script>
    
  • setFocusable – sets whether the element can be focused or not.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.setFocusable(false);
         }
     </script>
    
  • uncheckItem – unchecks an item. The id or the path to the item is passed in as the method argument.
     <script>
         window.onload = function () {
             var menu = document.querySelector('smart-menu');
             menu.uncheckItem('0.0');
         }
     </script>
    

Keyboard Support

Key Action
Tab The Menu receives focus by tabbing into it.
Arrow Up / Arrow Left / Arrow Down / Arrow Right Navigation between the items. Depends on selected mode and dropDownPosition.
Home Selects first enabled item in the last opennded container.
End Selects last enabled item in the last opennded container.
Enter Selects an item/opens a pop-up.
Escape Closes the selected popup and focuses its parent popup.
Space Toggles an item’s checked state.

Keyboard Support in Tree/Minimized Mode

Key Action
Tab The Menu receives focus by tabbing into it.
Arrow Up / Arrow Down Navigation between visible items.
Left Arrow On an expanded item, collapses the item. On a collapsed or a “leaf” item moves focus to the item’s parent item.
Right Arrow On a collapsed item expands the item. On an expanded item, moves to the first child item, or does nothing on a “leaf” item.
Home Moves to the top enabled item.
End Moves to the last enabled item.
Enter Expands/collapses an item or selects a “leaf” item. If the menu is minimized and the minimized pop-up is closed, opens the pop-up.
Escape If the menu is minimized, closes the minimized pop-up.
Space Toggles an item’s checked state.