Create A Windows Like Multi-level Dropdown Menu with jQuery

File Size: 5.74 KB
Views Total: 9434
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create A Windows Like Multi-level Dropdown Menu with jQuery

Main Menu is a jQuery plugin which allows you to create a nice multi-level dropdown navigation menu for your website, similar to the toolbar menu as you seen in Windows.

How to use it:

1. Include the required JS and CSS files in your web page.

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

<script src="//"></script>
<script src="js/"></script>

2. The markup structure for the navigation menu. The plugin will automatically generate a multi-level dropdown menu from the nest Html lists as follows.

<div id="menu-bar">
  <ul class="main-menu">
    <li> Menu 1
        <li> Menu 1.1
            <li><a href="#">Menu 1.1.1</a></li>
            <li><a href="#">Menu 1.1.2</a></li>
            <li><a href="#">Menu 1.1.3</a></li>
        <li class="separator"></li>
        <li> Menu 2.1
            <li><a href="#">Menu 2.1.1</a></li>
            <li><a href="#">Menu 2.1.2</a></li>
            <li><a href="#">Menu 2.1.3</a></li>
    <li> Menu 2

Change log:


  • Removed unused classes
  • Removed context menu and related images
  • Fixed click prevent bug

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