Responsive Multi-level Dropdown Navigation - jQuery Menu.js

File Size: 9.86 KB
Views Total: 5615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<script src="menu.min.js"></script>

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

<script src=""></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>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Script</a></li>
        <li><a href="#">NET</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>

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


5. Possible options to customize the plugin.


  // 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'

  // 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.