Responsive Multi-level Dropdown Navigation - jQuery Menu.js

The jQuery menu.js plugin transforms the regular multi-level dropdown menu into a fullscreen hamburger navigation that will slide out or fade in when toggled.

Supports desktop, tablet, and mobile devices. Compatible with most browsers.

See it in action:

How to use it:

1. Insert jQuery JavaScript library and the jQuery menu.js plugin's files into the page.

<link rel="stylesheet" href="menu.min.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="menu.min.js"></script>

2. Include the fastclick.js to remove click delays on touch devices (OPTIONAL).

<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>

3. Create a multi-level dropdown menu from nested lists.

<div class="ve-menu">
  <ul class="ve-menu-pc">
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a>
      <ul>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Script</a></li>
        <li><a href="#">NET</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

4. Initialize the plugin by calling the function on the top container.

$('.ve-menu').menu();

5. Possible options to customize the plugin.

$('.ve-menu').menu({

  // font size
  fontSize: '16px',

  // font size (sub menu)
  subFontSize: '16px',

  /*
  themeColor = {
    blue: {
      fontColor: '#fff',
      bgColor: '#0E90D2',
      hoverFontColor: '#fff',
      hoverBgColor: '#0C79B1'
    },
    dark: {
      fontColor: '#9D9D9D',
      bgColor: '#1F1F1F',
      hoverFontColor: '#fff',
      hoverBgColor: '#000'
    }
  };
  */
  fontColor: this.themeColor.blue.fontColor,
  bgColor: this.themeColor.blue.bgColor,
  hoverFontColor: this.themeColor.blue.hoverFontColor,
  hoverBgColor: this.themeColor.blue.hoverBgColor,
  subFontColor: this.themeColor.blue.fontColor,
  subBgColor: this.themeColor.blue.bgColor,
  subHoverFontColor: this.themeColor.blue.hoverFontColor,
  subHoverBgColor: this.themeColor.blue.hoverBgColor,

  // height
  height: 40,

  // item width
  itemWidth: 20,

  // space between items
  itemSpace: 1,

  // see above
  theme: 'blue',

  // options for hamburger navigation
  mMenuBtnColor: '#000',
  mMaskColor: '#000',
  mBgColor: '#000',
  mFontColor: '#fff',
  mSubBgColor: '#222',
  mSubFontColor: '#fff',
  mCloseBtnColor: '#fff',

  // 'slide' or 'fade'
  animate: false,

  // animation speed
  speed: 200
  
});

---

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