Jump to content

Guides

ips.ui.sideMenu

Description

The SideMenu widget works with standard side menu markup and makes it both interactive and improves its functionality when the user is visiting on a mobile device.

 

Usage

In most cases, a side menu should be built using the standard CSS classes. The data attribute is then added to the wrapper element.

Making side menus responsive

When the widget is to be used in responsive mode, an additional title should be supplied within the element, with the class ipsSideMenu_mainTitle; a link inside of that title should have the attribute data-action='openSideMenu':

<div class='ipsSideMenu' data-ipsSideMenu>
	<h3 class="ipsSideMenu_mainTitle ipsAreaBackground_light ipsType_medium">
		<a href="#modcp_menu" class="ipsPad_double" data-action="openSideMenu">
			<i class="fa fa-bars"></i> &nbsp;Menu Title&nbsp;<i class="fa fa-caret-down"></i>
		</a>
	</h3>
	<!-- Menu content belongs here -->
</div>

Using sidemenus as selectable menus

Sidemenus can be used as a way of allowing users to select one or more options on the fly, either as a radio (i.e only one selected at a time) or as a checkbox (i.e. multiple selected). This is achieved by setting the data-ipsSideMenu-type attribute on the menu and specifying data-ipsMenuValue attributes on the list items:

<ul class="ipsSideMenu_list ipsSideMenu_withRadios" data-ipsSideMenu data-ipsSideMenu-type="radio">
        <li>
            <a href='#' class='ipsSideMenu_item ipsSideMenu_itemActive' data-ipsMenuValue='one'>
                <input type="radio" name="type" value="one" checked>
                <label>One</label>
            </a>
        </li>
        <li>
            <a href='#' class='ipsSideMenu_item' data-ipsMenuValue='two'>
                <input type="radio" name="type" value="two">
                <label>Two</label>
            </a>
        </li>
</ul>

Note: Radio and checkbox inputs can be inserted inside the menu items as shown above. They will be hidden with CSS, and automatically selected as the user selects menu items. This enables the side menu to submit values as part of a form.

 

Options

responsive
(Boolean; optional; default true)

Specifies whether the side menu will add responsive behavior. It does this by hiding the menu, and showing a link to manually open it on-demand.

 

type
(String; optional; default 'radio')

Determines the type of selectable behavior the menu uses. By default, only one menu item can be selected; others will be deselected when a new one is clicked. This is radio behavior. In contrast, check will allow multiple items to be selected at once.

 

group
(String; optional)

Determines whether the above setting applies to the whole menu (when this option is false), or whether each group within the menu is treated as an individual menu for the purposes of the radio selection.

 

Events emitted by ips.ui.sidemenu

Events are emitted by the root menu element (i.e. the one on which the data-ipsSideMenu attribute is applied).

itemClicked.sideMenu

Triggered when the user selects an item in the menu.

Event data:

  • id
    The ID of the menu triggering the event
  • menuElem
    Reference to the menu element
  • selectedElem
    Reference to the selected element that caused this event
  • selectedItemID
    The data-ipsMenuValue value on the item that has been selected
  • selectedItems
    An array of all of the currently-selected values in the menu

  Report Guide


×