Basic Animated Jquery Dropdown Menu Plugin

In this quick jquery plugin tutorial I am going to introduce one more menu plugin called simple-menu.js. It is a very basic and simple plugin for creating animated jquery dropdown. With the help of this plugin you can easily convert your nested html unordered list into an animated on hover triggered dropdown menu list with little configuration follow the tutorial for integration of simple jquery menu plugin.

Integrate Basic Animated Jquery Dropdown Menu Plugin

Follow step by step tutorial to add this menu on your website.


Include required libraries on page.

<script src=""></script>
<script src="simple-menu.js"></script>


Add unordered list on page which act like dropdown menu with on hover triggered dropdown menu as well.

<ul class="parent">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link +</a>
        	<ul class="child">
        		<li><a href="#">Link</a></li>
        		<li><a href="#">Link</a></li>
        		<li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>


Add css on page for styling your menu.

ul.parent, ul.child {
  list-style: none;
  margin: 0;
  padding: 0;
ul.parent > li {
  display: inline-block;
  position: relative;
ul.parent > li a {
  display: block;
  background-color: #F6F6F6;
  padding: 1em 2em;
  height: 1em
ul.parent > li a:hover {
  background-color: #34A3EC;
  color: #FFF;
ul.child {
  display: none;
  position: absolute;
  top: 3em;
ul.child li a { min-width: 100%; }

See live demo and download source code.


See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.