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.
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.
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>
VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.