Minimalist Dropdown Navigation Menu Plugin With jQuery

File Size: 2.8 KB
Views Total: 3954
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist Dropdown Navigation Menu Plugin With jQuery

drop-down-menu.js is an ultra-light and cross-browser jQuery plugin that makes it ease to create a dropdown menu for your header site navigation.

How to use it:

1. Include the main CSS file in the header of the webpage to style the dropdown menu.

<link href="drop-down-menu.css" rel="stylesheet">

2. Create a dropdown menu from a nested html list as this:

<div class="menu-container">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
      <ul>
       <li><a href="#">Brief</a></li>
       <li><a href="#">Profile</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
  </ul>
</div>

3. Include jQuery library and the drop-down-menu.js script at the bottom of the webpage. That's it.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="drop-down-menu.js"></script>

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