Mobile Menu

Overview

For some menus for mobile-sized displays, it may be desirable to collapse the menu by default, rather than showing it. The Mobile Menu plugin does exactly that, replacing the menu list with a button that reveals the menu when clicked or tapped.

Usage

To use the Mobile Menu plugin, add the class mobileMenu to any menu list contained in a navbarContainer header. The list will be hidden for mobile screens and the button will be inserted just before the list in the markup. By default, the button is given the contrastButton button style class as well as a class of mobileMenuTrigger, which can be over-ridden if you wish to style it differently.

The default text for button is Menu, but you can change this by add a data-text data-attribute to the menu's ul.

Multiple mobile menus can be used in a single navbar. Each mobile menu ul element will have a corresponding button in a button group, in the order laid out in the code.

If you have a secondary nav bar, it's recommended to hide it for mobile screens using the hideMobile class. If needed, place a duplicate secondary menu ul within the li element for the active menu item in the primary navbar. Give the duplicate ul a class of showMobile so that it will only be shown to mobile browsers. An example of this technique in action can be seen in the article example.

Demo

To see the Mobile Menu plugin in action, just resize your browser to a mobile screen width. The code for the demo is below:

<div class="navbarContainer">
	<div class="container">
		<div class="row">
			<div class="col12">
				<ul class="mobileMenu">
					<li><a href="../">Overview</a></li>
					<li><a href="../examples.html">Examples</a></li>
					<li><a href="../layout.html">Page Layout</a></li>
					<li><a href="../core.html">Core Elements</a></li>
					<li><a href="../icons.html">Icons</a></li>
					<li><a href="../ui.html">UI Elements</a></li>
					<li><a href="../plugins.html" class="active">JavaScript Plugins</a></li>
				</ul>
			</div>
		</div>
	</div>	
</div>
Want to continue the tour?

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.