jQuery Plugin for Responsive Menu System - meanMenu

meanMenu is a jQuery plugin that makes your multi-level navigation menus fully responsive and compatible with desktop, mobile, and tablet devices. 

How to use it:

1. Include the latest jQuery library in your head section.

<script src="jquery.min.js"></script>

2. Include meanMenu CSS to style your menu

<link rel="stylesheet" href="meanmenu.css" />

3. Create a multip-level navigation menu from a nested nav list as follows:

<nav>
  <ul>
    <li><a href="#">Top Level Link</a>
      <ul>
        <li><a href="#">Second Level Link</a>
          <ul>
            <li><a href="#">Third Level Link</a></li>
            <li><a href="#">Third Level Link</a></li>
            <li><a href="#">Third Level Link</a>
              <ul>
                <li><a href="#">Fourth Level Link</a></li>
                <li><a href="#">Fourth Level Link</a></li>
                <li><a href="#">Fourth Level Link with extra long name so it wraps</a>
                  <ul>
                    <li><a href="#">Fifth Level Link</a></li>
                    <li><a href="#">Fifth Level Link</a></li>
                    <li><a href="#">Fifth Level Link</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Second Level Link</a></li>
        <li><a href="#">Second Level Link</a></li>
      </ul>
    </li>
    <li><a href="#">Top Level Link</a></li>
    <li><a href="#">Top Level Link</a></li>
    <li><a href="#">Top Level Link</a></li>
  </ul>
</nav>

4. Include meanMenu.js and then call the plugin on the nav list. That's it.

<script src="jquery.meanmenu.js"></script> 

jQuery(document).ready(function () {
  jQuery('header nav').meanmenu();
});

5. All possible options to customize the plugin.

jQuery('nav').meanmenu({

  // target element
  meanMenuTarget: jQuery(this), 

  // where meanmenu will be placed within the HTML
  meanMenuContainer: 'body', 

  // close button
  meanMenuClose: "X",

  // close button size
  meanMenuCloseSize: "18px",

  // open button
  meanMenuOpen: "<span /><span /><span />",

  // or 'left'
  meanRevealPosition: "right", 

  // 
  meanRevealPositionDistance: "0", // Tweak the position of the menu

  // background color
  meanRevealColour: "", 

  // breakpoint
  meanScreenWidth: "480",

  // set a height here in px, em or %
  meanNavPush: "", 

  // show sub-menus
  meanShowChildren: true,

  // allow expand/collapse sub-menus
  meanExpandableChildren: true,

  // expand button
  meanExpand: "+",

  // collapse button
  meanContract: "-",

  // true to remove classes and IDs
  meanRemoveAttrs: false, 

  // set to true for one page sites
  onePage: false,

  // display attribute, e.g. table-cell
  meanDisplay: "block",

  // remove specific elements
  removeElements: "", 

  // expand sub-menus when you click parent
  parentClickExpands: true

});

Changelog:

2020-06-25

• Allows parent menu item to trigger exansion and allows html icons for expand button

2014-11-01

• v2.0.8

---

This awesome jQuery plugin is developed by tgeorgel. For more Advanced Usages, please check the demo page or visit the official website.