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.

A demo of creating vertical menu

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:

Bootstrap jQuery metis Menu

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:

 

Just above the </body> tag, place the JS files of jQuery, Bootstrap, and plug-in. Finally, the jQuery code for initiating the menu:

 

A demo of no-collapse menu

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.

Bootstrap jQuery Menu toggle

See online demo and code

The only difference between this and first example is the jQuery code where toggle option is used:

 

A demo of right to left menu

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:

Bootstrap jQuery Menu trl

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.

An example of menu with hover for desktop

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:

Bootstrap jQuery Menu hover

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:

 

You can see the complete code in the demo page.

A demo of opening menus with animations

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”.

Bootstrap jQuery Menu animate

See online demo and code

A menu code looks like this with animate classes:

 

 

Changing the look of menu

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.