A Collapsible jQuery Menu jQuery Plugin For Bootstrap

metisMenu is a simple jQuery menu plugin for Bootstrap 4 or 3 that helps you create a collapsible menu with accordion animated effects and auto-collapse support.

3 level accordion menu bootstrap, bootstrap accordion menu with submenu, jquery accordion menu with submenu, jquery vertical accordion menu

How to make use of it:

Installation:

# Yarn
$ yarn add metismenu

# NPM
$ npm install metismenu --save

1. Include the Bootstrap 4 or 3 framework in your internet web page.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script> 

2. Include Font Awesome for the control buttons.

<link href="font-awesome.css" rel="stylesheet">

3. Create an accordion menu using nested lists.

<ul id="menu">
  <li class="active">
    <a href="#" class="has-arrow" aria-expanded="true">Menu 0</a>
    <ul>
      <li><a href="#">item 0.1</a></li>
      <li><a href="#">item 0.2</a></li>
      <li><a href="#">item 0.3</a></li>
    </ul>
  </li>
  <li>
    <a href="#" class="has-arrow" aria-expanded="false">Menu 1</a>
    <ul>
      <li><a href="#">item 1.1</a></li>
      <li><a href="#">item 1.2</a></li>
      <li>
        <a href="#" class="has-arrow" aria-expanded="false">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>
        </ul>
      </li>
      <li><a href="#">item 1.4</a></li>
      <li>
        <a href="#" class="has-arrow" 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>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#" class="has-arrow" 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>
    </ul>
  </li>
</ul>

4. Include the jQuery library and the jQuery metisMenu plugin’s information on the web page.

<link rel="stylesheet" href="/dist/metisMenu.min.css">
<script src="jquery.min.js"></script>
<script src="/dist/jquery.metisMenu.js"></script> 

5. Call the plugin and executed it.

$(function () {
  $('#menu').metisMenu();
});

6. All default settings to customize the menu.

$('#menu').metisMenu({

  // enabled/disable the auto collapse.
  toggle: true,

  // prevent default event
  preventDefault: true,

  // default classes
  activeClass: 'active',
  collapseClass: 'collapse',
  collapseInClass: 'in',
  collapsingClass: 'collapsing',

  // .nav-link for Bootstrap 4
  triggerElement: 'a',

  // .nav-item for Bootstrap 4
  parentTrigger: 'li',

  // .nav.flex-column for Bootstrap 4
  subMenu: 'ul'

});

Events

Event TypeDescription
show.metisMenuThis event fires immediately when the _show instance method is called.
shown.metisMenuThis event is fired when a collapse ul element has been made visible to the user (will wait for CSS transitions to complete).
hide.metisMenuThis event is fired immediately when the _hide method has been called.
hidden.metisMenuThis event is fired when a collapse ul element has been hidden from the user (will wait for CSS transitions to complete).

jQuery Accordion Menu Plugin For Bootstrap, metismenu Plugin/Github, simple jquery accordion menu, metismenu cdn, jquery vertical menu expand collapse


See Demo And Download

Official Website(onokumus): Click Here

This superior jQuery/javascript plugin is developed by onokumus. For extra Advanced Usage, please go to the official website.

Share