metisMenu Plugin is a javascript library that allows creating a collapsible menu with animated accordion effects and auto collapse support. You can use Event handlers in this plugin. You also set icon for each menu.
Features:
- Fully responsive and works great on every device (Desktop, Tablet, Mobile)
- Collapse/expand animations.
- Event handlers.
Live Demo
1. Auto Collapse
2. No Collapse
How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/bootstrap4/bootstrapcustom.min.css" />
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/css/metisMenu.min.css" />
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/css/mm-vertical.css" />
2. HTML
Create a container where you want to render menu
<div class="container">
<div class="row">
<div class="col-12">
<h4>1. Auto Collapse</h4>
</div>
</div>
<div class="row">
<aside class="col-md-6">
<nav class="sidebar-nav">
<ul class="metismenu" id="menu1">
<li>
<a class="has-arrow" href="#">
<span class="fa fa-fw fa-github fa-lg"></span>
metisMenu
</a>
<ul>
<li>
<a href="#">
<span class="fa fa-fw fa-code-fork"></span> Fork
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-star"></span> Star
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
</a>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
<ul>
<li><a href="#">item 0.1</a></li>
<li><a href="#">item 0.2</a></li>
<li><a href="#">onokumus</a></li>
<li><a href="#">item 0.4</a></li>
</ul>
</li>
<li id="removable">
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
<ul>
<li><a href="#">item 1.1</a></li>
<li><a href="#">item 1.2</a></li>
<li class="mm-active">
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
<ul>
<li><a href="#">item 1.3.1</a></li>
<li><a href="#">item 1.3.2</a></li>
<li><a href="#">item 1.3.3</a></li>
<li><a href="#">item 1.3.4</a></li>
</ul>
</li>
<li><a href="#">item 1.4</a></li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
<ul>
<li><a href="#">item 1.5.1</a></li>
<li><a href="#">item 1.5.2</a></li>
<li><a href="#">item 1.5.3</a></li>
<li><a href="#">item 1.5.4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
<ul>
<li><a href="#">item 2.1</a></li>
<li><a href="#">item 2.2</a></li>
<li><a href="#">item 2.3</a></li>
<li><a href="#">item 2.4</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
</div>
<div class="row">
<div class="col-12">
</div>
</div>
<div class="row">
<div class="col-12">
<h4>2. No Collapse</h4>
</div>
</div>
<div class="row">
<div class="col-md-6">
<nav class="sidebar-nav">
<ul class="metismenu" id="menu2">
<li>
<a class="has-arrow" href="#">
<span class="fa fa-fw fa-github fa-lg"></span>
metisMenu
</a>
<ul>
<li>
<a href="#">
<span class="fa fa-fw fa-code-fork"></span> Fork
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-star"></span> Star
</a>
</li>
<li>
<a href="#">
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
</a>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
<ul>
<li><a href="#">item 0.1</a></li>
<li><a href="#">item 0.2</a></li>
<li><a href="#">onokumus</a></li>
<li><a href="#">item 0.4</a></li>
</ul>
</li>
<li id="removable">
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
<ul>
<li><a href="#">item 1.1</a></li>
<li><a href="#">item 1.2</a></li>
<li class="mm-active">
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
<ul>
<li><a href="#">item 1.3.1</a></li>
<li><a href="#">item 1.3.2</a></li>
<li><a href="#">item 1.3.3</a></li>
<li><a href="#">item 1.3.4</a></li>
</ul>
</li>
<li><a href="#">item 1.4</a></li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
<ul>
<li><a href="#">item 1.5.1</a></li>
<li><a href="#">item 1.5.2</a></li>
<li><a href="#">item 1.5.3</a></li>
<li><a href="#">item 1.5.4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
<ul>
<li><a href="#">item 2.1</a></li>
<li><a href="#">item 2.2</a></li>
<li><a href="#">item 2.3</a></li>
<li><a href="#">item 2.4</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
3. Javascript
Load jQuery library together with the Vertical Menu library into your code
<script src="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/js/metisMenu.min.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/js/mm-vertical.js"></script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.
