Simple and Clean jQuery Drop Down Menu Plugin - naviDropDown

naviDropDown is a simple jQuery plugin that allows you quickly to create horizontal or vertical drop down menus with slideUp/slideDown effects and easing methods.

This plugin use jquery hoverIntent plugin to determine the user's intent, like a crystal ball, only with mouse movement. It also can worked with jQuery Easing Plugin to give advanced easing options.

You might also like:

• Microsoft-Like Responsive Horizontal Drop Down Menu with CSS3 and jQuery
• Animated Drop Down Menu Plugin - apycom
• Pretty jQuery Navigation Menu With Smooth Animation Effect- tmailsilder
• Neat and modern Dropdown Nav Menu with Pure CSS3
• Responsive Multi-Level Navigation Plugin
• Pure CSS3 Drop Down Menu with Icons
• Smooth jQuery Dropdown Navigation Menu With CSS3
• Smooth and Responsive Drop Down Menu With CSS3 and jQuery
• Touch Enabled Multi-level Drop Down Menu Plugin - superfish

How to use it:

1. Include jQuery library and other necessary javascript files in the head section of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="jquery.naviDropDown.js"></script>

2. The HTML

<div class="container">
<div id="navigation_horiz">
<ul>

<li><a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_one">
<p><a href="#">This is a Link</a></p>
<p>... </p>
</div>
</li>

<li><a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_two">
<p><a href="#">This is a Link</a></p>
<p>... </p>
</div>
</li>

...

</ul>
</div>
</div>

3. The CSS

#navigation_horiz {
width: 820px;
clear: both;
padding: 0 0 0 0;
margin: 0 auto
}
#navigation_horiz ul {
height: 50px;
display: block
}
#navigation_horiz ul li {
display: block;
float: left;
width: 200px;
height: 50px;
background: #999;
margin: 0 1px 0 0;
position: relative
}
#navigation_horiz ul li a.navlink {
display: block;
width: 200px;
height: 30px;
padding: 20px 0 0 0;
text-align: center;
color: #fff;
text-decoration: none
}
#navigation_horiz .dropdown {
position: absolute;
padding: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px
}
#navigation_horiz ul li #dropdown_one {
background: #ccc;
color: #fff
}
#navigation_horiz ul li #dropdown_one a {
color: red
}
#navigation_horiz ul li #dropdown_two {
background: #ccc;
color: #fff
}
#navigation_horiz ul li #dropdown_two a {
color: black
}
#navigation_horiz ul li #dropdown_three {
background: #ccc;
color: #fff
}
#navigation_horiz ul li #dropdown_three a {
color: gray
}

5. The javascript

<script type="text/javascript">
$(function(){
	
$('#navigation_horiz').naviDropDown({
	dropDownWidth: '300px'
});
	
});
</script>

6. More options to customize your drop down menu

<script type="text/javascript">
$(function(){
	
$('#navigation_horiz').naviDropDown({
	dropDownClass: 'dropdown', //the class name for your drop down
	dropDownWidth: 'auto', //the default width of drop down elements
	slideDownEasing: 'easeInOutCirc', //easing method for slideDown
	slideUpEasing: 'easeInOutCirc', //easing method for slideUp
	slideDownDuration: 500, //easing duration for slideDown
	slideUpDuration: 500, //easing duration for slideUp
	orientation: 'horizontal' //orientation - either 'horizontal' or 'vertical'
});
	
});
</script>

 

---

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