Minimalist jQuery Drop Down Menu Plugin - jVanilla

File Size: 102 KB
Views Total: 5979
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist jQuery Drop Down Menu Plugin - jVanilla

jVanilla is an extremely lightweight jQuery menu plugin that turns nested unordered list into a multi-level drop down menu with some simple animations.


  • Currently supports one submenu level
  • Custom trigger events: mouse hover or click.
  • 2 simple animations: sliding and fading.
  • Allows to align right the last submenu.
  • Custom the speed of animations and the delay time on mouseout.

How to use it:

1. Create a navigation menu using Html unordered lists.

<ul class="menu-hover">
<li> <a href=""> Home </a> </li>
<li> <a href=""> Categories </a>
<li><a href="">All jQuery Plugins</a></li>
<li><a href="">Accordion</a> (19)</li>
<li><a href="">Animation</a> (120)</li>
<li><a href="">Chart &amp; Graph</a> (19)</li>
<li><a href="">CSS3 &amp; Html5</a> (28)</li>
<li><a href="">Form</a> (212)</li>
<li><a href="">Gallery</a> (82)</li>
<li><a href="">Layout</a> (141)</li>
<li><a href="">LightBox</a> (63)</li>
<li><a href="">Loading</a> (32)</li>
<li><a href="">Menu</a> (118)</li>
<li><a href="">Mobile</a> (18)</li>
<li><a href="">Others</a> (326)</li>
<li><a href="">Rotator</a> (18)</li>
<li><a href="">Slider</a> (116)</li>
<li><a href="">Slideshow</a> (64)</li>
<li><a href="">Social Media</a> (40)</li>
<li><a href="">Table</a> (41)</li>
<li><a href="">Text</a> (78)</li>
<li><a href="">Time &amp; Clock</a> (61)</li>
<li><a href="">Tooltip</a> (25)</li>
<li><a href="">Zoom</a> (41)</li>
<li> <a href=""> jQuery Plugins </a>
<li><a href=""> Latest </a></li>
<li><a href=""> Additions </a></li>
<li> <a href=""> Popular </a> </li>
<li> <a href=""> Recommended </a>
<li> <a href=""> Publishing </a> </li>
<li> <a href=""> Blog </a>
<li><a href="#"> Test 1 </a></li>
<li><a href="#"> Test 2 </a></li>
<li><a href="#"> Test 3 </a></li>

2. Load the jQuery javascript library and jQuery jVanilla plugin at the bottom of your page.

<script src=""></script> 
<script src="res/js/jquery.jVanilla.js" type="text/javascript"></script> 

3. Initialize the plugin.

<script type="text/javascript">
$(document).ready(function (){
speed   : 50, //  the speed of animations
animation   : 'sliding', // sliding or fading
eventType   : 'hover', // hover or click
delay   : 100, // the delay time on mouseout
isHoverClickable: true, // set to true if you want to enable the click on the first level link 
isLastRightAlign: true // set to false if you want to align left the last submenu  

4. Put styles in your CSS and change it to your taste.

/* jVanilla Styles
ul ul {
display: none;
background: #4b545f;
ul li:hover > ul {
display: block;
ul {
background: #086FA1;
border-radius: 2px;
list-style: none;
position: relative;
ul:after {
content: "";
clear: both;
display: block;
ul li {
float: left
ul li:hover {
background: #4b545f
ul li:hover a {
color: #fff
ul li a {
display: block;
padding: 8px 5px;
color: #FFF;
text-decoration: none
ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%
ul ul li {
float: none;
border-top: 1px solid #6b727c;
position: relative
ul ul li a {
color: #fff;
ul ul li a:hover {
background: #4b545f;
ul ul ul {
position: absolute;
left: 100%;
top: 0;
.js-enabled ul li:hover > ul {
display: none;

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