A jQuery menu for Bootstrap with vertical, animate, and hover demos
The metisMenu plug-in
The metisMenu is a jQuery plug-in that you may use with Bootstrap framework (version 3+) for creating different types of menus like vertical menu, a menu with folder view.
You may also create menu items that open at mouse hover and with different animations like bounceIn, fade, flip and others.
Keep reading this tutorial for setting up and seeing the live demos of different menus created by using this plug-in.
In this example, a vertical menu with auto collapse is created. You may click the arrows, plus and cross icons for opening and closing the main or sub menus. See the demonstration and code online by clicking the links below:
See online demo and code
This is how the menu is created.
First of all, include the Bootstrap, font-awesome, metisMenu and CSS for this demo files in the <head> section (you can see the CDN and local links in the demo page’s code section).
The markup section involves creating div, nav, ul etc tags where Bootstrap and plug-in’s CSS classes are referenced. For example, this is the complete menu markup of the demo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<div class="clearfix"> <aside class="sidebar"> <nav class="sidebar-nav"> <ul class="metismenu" id="auto-collapse-menu-demo"> <li class="active"> <a href="#" aria-expanded="true"> <span class="sidebar-nav-item-icon fa fa-github fa-lg"></span> <span class="sidebar-nav-item">Menu demo</span> <span class="fa arrow"></span> </a> <ul aria-expanded="true"> <li> <a href="https://www.jquery-az.com/"> <span class="sidebar-nav-item-icon fa fa-code-fork"></span> jQuery </a> </li> <li> <a href="https://www.jquery-az.com/"> <span class="sidebar-nav-item-icon fa fa-star"></span> Bootstrap </a> </li> <li> <a href="https://www.jquery-az.com/"> <span class="sidebar-nav-item-icon fa fa-exclamation-triangle"></span> PHP </a> </li> </ul> </li> <li> <a href="#" aria-expanded="false">jQuery <span class="fa arrow"></span></a> <ul aria-expanded="false"> <li><a href="https://www.jquery-az.com/">$.on</a></li> <li><a href="https://www.jquery-az.com/">$.animate</a></li> <li><a href="https://www.jquery-az.com/">$.click()</a></li> </ul> </li> <li> <a href="https://www.jquery-az.com/" aria-expanded="false">Bootstrap <span class="glyphicon arrow"></span></a> <ul aria-expanded="false"> <li><a href="#">Forms</a></li> <li><a href="#">Tables</a></li> <li> <a href="#" aria-expanded="false">Carousel <span class="fa plus-times"></span></a> <ul aria-expanded="false"> <li><a href="#">Single Item</a></li> <li><a href="#">Multi item</a></li> <li><a href="#">Product</a></li> </ul> </li> <li><a href="#">Modals</a></li> <li> <a href="#" aria-expanded="false">Accordions<span class="fa plus-minus"></span></a> <ul aria-expanded="false"> <li><a href="#">Accordion 1</a></li> <li><a href="#">Accordion 2</a></li> <li><a href="#">Accordion 3</a></li> <li><a href="#">Accordion 4</a></li> </ul> </li> </ul> </li> </ul> </nav> </aside> </div> |
Just above the </body> tag, place the JS files of jQuery, Bootstrap, and plug-in. Finally, the jQuery code for initiating the menu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(function() { $('#auto-collapse-menu-demo').metisMenu(); }); </script> |
By using the toggle option as false, you may create a non-collapsible menu. That means, if you open the first menu and click on the second header, the first menu will not close. You may compare this to above example where only single menu items are opened and other (if opened) get closed.
See online demo and code
The only difference between this and first example is the jQuery code where toggle option is used:
|
1 2 3 4 5 |
$('#auto-collapse-menu-demo').metisMenu({ toggle: false }); |
By using dir=”rtl” attribute in the main div containing menu, you may create a right to left menu. See the same menu with rtl directive:
See online demo and code
Only difference is in the main <div>:
<div class=”clearfix” dir=”rtl”>
You should set the position of the menu with other content in the web page where you intend to use this plug-in.
For the desktop users of your website, you may present the menu with hover option. As the mouse hovers over the menu items with sub-menu, it will open up. For the smaller screens, (for mobile or smart phones) the menu will work as shown in above examples, so it is responsive. See the demo with hover state:
See online demo and code
For that, you need to add jQuery code and deal with CSS for small and large screens.
This is the CSS used:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
@media (min-width: 768px) { #hover-menu-demo li { position: relative; } #hover-menu-demo > li ul { position: absolute; left: 100%; top: 0; min-width: 200px; display: none; } #hover-menu-demo li:hover > ul, #hover-menu-demo li:hover > ul.collapse { display: block !important; height: auto !important; z-index: 1000; background: #444; visibility: visible; } } |
You can see the complete code in the demo page.
To add interactivity in menus, you may use animate.css animations to open menu or sub-menus with different styles. For that, you may simply add the animate.css from the CDN in the <head> section:
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css” charset=”utf-8″>
And just add the classes (animated and desired style) in the menu head or sub-head where you want to use it. For example,
<ul aria-expanded=”false” class=”animated swing”>
See the following demo where I added “animated pulse” classes in the “menu demo” main menu, swing to the jQuery menu item, fade to Bootstrap and jello to the sub-menu “Accordions”.
See online demo and code
A menu code looks like this with animate classes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<li> <a href="#" aria-expanded="false">jQuery <span class="fa arrow"></span></a> <ul aria-expanded="false" class="animated swing"> <li><a href="https://www.jquery-az.com/">$.on</a></li> <li><a href="https://www.jquery-az.com/">$.animate</a></li> <li><a href="https://www.jquery-az.com/">$.click()</a></li> </ul> </li> |
The CSS file that deals with the color scheme of the menu is demo.css. You may change the style there to match the menu with the rest of the design of your web site or take a few classes and override in the <style> section or in your own external CSS file. For example, sidebar-nav ul ul a class deals with the links contained in <ul>.
Get this file by going to Github website or view source any demo page and download any required CSS or JS file.