jQuery Horizontal Menu Plugin – metisMenu.js

metisMenu is a javascript library that allows create horizontal menus with submenu. In each submenu, you can add accordition submenus. You can use 2 types clickable and hoverable with menus. You also set icon for each menu.

Features:

  • Fully responsive and works great on every device (Desktop, Tablet, Mobile)
  • Multi-level menu support
  • Active menu to be selected
  • Event handlers.

Live Demo

How to Use

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-horizontal.css" />

Create a container where you want to render menu

<div class="container">
  <div class="pb-5">
    <h4>Clickable & Responsive</h4>
    <nav class="topbar-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="https://github.com/onokumus/metisMenu">
                <span class="fa fa-fw fa-code-fork"></span> Fork
              </a>
            </li>
            <li>
              <a href="https://github.com/onokumus/metisMenu">
                <span class="fa fa-fw fa-star"></span> Star
              </a>
            </li>
            <li>
              <a href="https://github.com/onokumus/metisMenu/issues">
                <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="http://onokumus.com">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>
              <a class="has-arrow" href="#" 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>
                <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 class="pt-3 pb-5">
    <h4>Hoverable for Desktop & Responsive</h4>
    <nav class="topbar-nav is-hoverable">
      <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>
              <a class="has-arrow" href="#" 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>
                <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>

Load jQuery library together with the Horizontal Menu library into your code

<script src="http://onlinefreetools.net/wp-content/uploads/demo/menu/metismenu/js/hor_metisMenu.min.js"></script>
<script>
  jQuery(function () {

    jQuery('#menu1').metisMenu();

    jQuery('#menu2').metisMenu();

  });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.