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.

Libraries

Include required libraries on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="simple-menu.js"></script>

<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>
        	</ul>
 
        </li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>

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%; }