Basic Animated Jquery Dropdown Menu Plugin

by Posted on

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.
jquery-menu


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>

HTML

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



CSS

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.

DEMO | DOWNLOAD

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.



Published by admin