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