Menu CSS Styling

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

Required files

Smart.Menu requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

  • smart.element.js -- this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.menu.js -- this file defines the main functionality of the Smart.Menu custom element.
  • 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 also requires the following style sheets in order to be displayed correctly.

  • smart.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) an empty Smart.Menu custom element, insert the following tag in an HTML page:

<smart-menu></smart-menu>

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.:

<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>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-menu');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let mode = customElement.mode;

Here is an example showing how to set a property dynamically:

customElement.mode = 'vertical';

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-menu');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.minimize();

Animations

By default the animation for Smart.Menu is disabled. It can be enabled by adding the CSS class called "animation" to the element, like so:

<smart-menu class="animation">
    <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>

Styling (CSS API)

Smart HTML Elements use a pair of css files - smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.Menu:

  • smart-menu - applied to the whole Menu element. Can be used for setting width, height and border-, color- and font-related CSS properties.
    • .smart-hamburger-icon - applied to the Menu's hamburger icon that appears when the element is minimized.
    • .smart-hamburger-icon-custom-container - applied to the container of the custom minimize icon (visible when the property minimizeIconTemplate is set).
    • .smart-menu-scroll-button - applied to Menu scroll buttons.
    • .smart-scroll-button-near - applied to left/top scroll buttons.
    • .smart-scroll-button-far - applied to right/bottom scroll buttons.
      • .smart-arrow - applied to scroll button arrows.
    • .smart-menu-main-container - applied to the container of top-level smart-menu-item and smart-menu-items-group elements.
    • .smart-menu-minimized-items-container - applied to the container of all smart-menu-item and smart-menu-items-group elements when the Menu is minimized or when the property mode is set to 'tree'.
    • smart-menu-items-group - custom element that represents an HTML and a logical container of Menu items.
      • .smart-menu-item-label-element - applied to the label of the items group.
      • .smart-menu-items-group-arrow - applied to the arrow of the items group.
      • .smart-menu-drop-down - applied to the dropdown of the items group. It contains the actual child item container (.smart-menu-item-container) and, optionally, scroll buttons.
      • .smart-menu-item-container - applied to the child item container.
    • smart-menu-item - custom element that represents a Menu item.
      • .smart-menu-item-label-element - applied to the label of the item
      • .smart-menu-item-shortcut - applied to the helper label of the item, that can be used to indicate a helper text, such as a keyboard shortcut.

CSS variables

Smart.Menu uses the following CSS variable:

  • --smart-menu-scroll-button-size - used to set the size of the scroll buttons of Smart.Menu (their width when mode is 'horizontal' and the scroll buttons are top-level and their height in all other cases). Default value is 20px.