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.

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.