Here is a simple jQuery plugin I wrote recently which allows you to create a simple drop down menu, utilising hoverIntent, and jQuery’s own slideUp and slideDown effects. You can also set the orientation of the drop down depending if your navigation is horizontal (default) or vertical, and set the duration and easing method of both slideUp and slideDown on initiation of the plugin.
The Plugin – jquery.naviDropDown:
Example below shows initiation of horizontal (default) and vertical orientations.
<script type="text/javascript">
$(function(){
$('#navigation_horiz').naviDropDown({
dropDownWidth: '300px'
});
$('#navigation_vert').naviDropDown({
dropDownWidth: '300px',
orientation: 'vertical'
});
});
</script>
Default operation (parameters):
For all the easing methods see jQuery Easing Plugin
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'
CSS:
For vertical orientation – just remove the float:left from the #navigation_vert ul li or check the example below. Also *display:inline-block; resolves the gap issues between list items in Internet Explorer 7, this is only needed for vertical orientation.
/* ----------------------------------------------------- */
/* navigation styles - BEGIN */
/* style for horizontal nav */
#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}
/* style for vertical nav */
#navigation_vert {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_vert ul {height:50px; display:block}
#navigation_vert ul li {display:block; width:200px; height:50px; background:#999; margin:0 0 1px 0; position:relative}
#navigation_vert ul li a.navlink {display:block; *display:inline-block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_vert .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topright:10px}
/* style for each drop down - horizontal */
#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}
/* style for each drop down - vertical */
#navigation_vert ul li #dropdown_four {background:#333; color:#fff}
#navigation_vert ul li #dropdown_four a {color:red}
#navigation_vert ul li #dropdown_five {background:#666; color:#fff}
#navigation_vert ul li #dropdown_five a {color:black}
#navigation_vert ul li #dropdown_six {background:#777; color:#fff}
#navigation_vert ul li #dropdown_six a {color:orange}
/* navigation styles - END */
/* ----------------------------------------------------- */
HTML:
The element for the drop down is .dropdown – which is set as a parameter into the plugin, but can be changed, you can place any html within this element, each dropdown element can have its own styles, you can see that I have individually styled them via the CSS above targeting its ID. (The third list item does not have a drop down attached to it in the examples).
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li><a href="" class="navlink">List Item</a></li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_three">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
</ul>
</div><!-- #navigation_horiz -->
Limitations:
Version 1.0: The default width of each dropdown is set to auto, so the automatic width will adjust to the width of the button for which the drop down is applied to. The plugin does not automatically calculate the width of the dropdown based on what is within it. You can manually overide the width from initiation – this applies to horizontal and vertical orientation. This is a basic jquery drop down menu, which obviously could be expanded, but can be customised further using CSS.
Download Source Files (Demo Files Attached): jquery.naviDropDown.v1.0
Let us know how you get on via comments below… or tweet me @mashedcreative
Pingback: Tweets that mention Simple jQuery Navigation Drop Down Menu with easing and hoverIntent, naviDropDown.1.0 « Brandammo Blog -- Topsy.com
Thanks for the code. I am implementing the horizontal menu. Is there any easy way to make the horizontal menu to slide Up (instead of down)? Thanks for any hint!
Thanks! Providing you are comfortable with the jQuery, you can modify the plugin itself… jQuery’s slideUp() actually just acts on the height of the element and then hides it once the height is at 0…
what you will have to do is create a container for your drop down which has an overflow property of hidden, and position: relative, and use jQuery’s animate method to move the drop down menu up, the drop down will have to be positioned absolutely within the container.
This is great thank you. Is there a way for all of the elements to drop down after hovering over the nav bar?
if you want all drop downs to slidedown then you can make it so that any of the nav buttons activate all drop downs when hovered… just modify the showDropDown() and hideDropDown() methods.
Instead of:
activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});Use:
$(opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});so whichever button you rollover, the dropdown will slidedown regardless, apply the change to both methods.
Pingback: 30+ jQuery Plugins and Scripts for Web Designers 2011 | Web Design Zo
Pingback: jQuery Toggle Drop Down Menu – jQuery.anyDropDown « Brandammo Blog
Very nice.
I’m revealing my weakness at CSS here, but if you wanted to include standard, bulleted lists inside one of these dropdowns, how would you style them so they don’t inherit the menu styling?
in the example, it shows exactly what you want to do, you can target the drop down items specifically…
for example, the “dropdown” class has also an ID, i.e. dropdown_one, dropdown_two and dropdown_three… you can target those ID’s or name them to whatever you wish.
Nice navigation bar this just uses a slidein and slideout effect, Any fadeins and fadeouts for a bit cleaner intro?
Thanks, yes you can change it quite easily in the plugin, change slideDown to fadeIn and change slideUp to fadeOut, instead of the slide, the menu will fade in and out
Hi, im a bit new when it come to this and when i tried to use this all the drop downs were permanantly down instead of when i hovered over them, what am i doing wrong?
are there any errors showing in the console of your browser?
Hello KT,
Thanks you for simple, yet very useful menu sample. I’d like to extend and use it in my work, but I can’t find exact license description for your code. Is it licensed in the same dual-license manner as jQuery itself? Would be lovely to see it under MIT license.
Thanks for your comments! Yes you are free to extend this plugin, it is under the MIT License (i’ve updated the plugin with the relevant description)…
Good day, Is it possible to put a delay on mouse out to keep the drop down open for say a half second?
Yes you can quite easily, just add the delay() method before the slideUp…
Change:
function hideDropDown(){ activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown }To:
function hideDropDown(){ activeNav.find('.'+opts.dropDownClass).delay(500).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown }Im trying to create a slide up menu like here
http://www.rochebobois.com/#/en-ae/home
Is is possible for this menu to hold image icons as it in above link? also how do i slide up the menu instead slide down?
yes the menu can have images inside it, but to have it slideup, you will need to modify the plugin itself providing you have knowledge of jQuery… you will need to put the dropdown (the menu which is hidden/shown) within a container element which is positioned relatively and the dropdown menu is positioned absolutely within it, and using the animate method of jQuery to animate its top position.
Really nice site!
Pingback: 15 Fresh jQuery Menu Plugins and Tutorials
Pingback: Web Development articles, tutorials, help » Blog Archive » 15 Fresh jQuery Menu Plugins and Tutorials
Pingback: Плагины jQuery для создания меню (15 уроков)
Pingback: 15 Fresh jQuery Menu Plugins and Tutorials | Newformz
Pingback: 15 Fresh jQuery Menu Plugins and Tutorials | WP Plates! | Wordpress Themes
Pingback: 15個jQuery for Menu下載與教學 « 我是派
Hi I’m struggling to add a background-position change for my link that triggers the drop-down.
I’m using an image sprite that shows a down-arrow (background-position:top) to indicate there is a drop-down. When the drop-down is displayed, I want that arrow to be my up-arrow image (background-position:bottom). I’m using a class for the arrow. I could also use a toggle class between .down and .down up. Any ideas would be much appreciated!
Where can I add that code to make it happen correctly?
Thank you!!
Hi Rachel,
just add it into the showDropDown() and hideDropDown() functions.
Something similar to:
function showDropDown(){ activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing}); activeNav.css({backgroundPosition: '0 50px'}); } function hideDropDown(){ activeNav.find('.'+opts.dropDownClass).delay(500).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown activeNav.css({backgroundPosition: '0 0'}); }Or if you want to animate it… you might want to also use this plugin:
http://plugins.jquery.com/project/backgroundPosition-Effect
and use something like:
function showDropDown(){ activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing}); activeNav.stop().animate({backgroundPosition: '0 50px'}, {duration:800, easing: 'easeInOutQuint'}); } function hideDropDown(){ activeNav.find('.'+opts.dropDownClass).delay(500).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown activeNav.stop().animate({backgroundPosition: '0 0'}, {duration:800, easing: 'easeInOutQuint'}); }Pingback: Top 10 Jquery Tutorials you should know « « WebDesignerGeeks - Web Designer, Web Developer blog WebDesignerGeeks – Web Designer, Web Developer blog
Hello!
I want to thank you for this simple and very elegant code. This was a great find.
You mention that the width of the dropdown menu is set to auto.I changes the horizontal menu to 6 navlinks, their dimensions 164px x 28px (because I plan to use button graphics, and that was the size chosen). I tried assigning a width in the CSS and also in the main .js file’s dropDownWidth od 164, but still, the dropdown is far larger in width than what I want. Ideally, I want the dropdown to be the same width as the top links, 164px.
Any thoughts on how I can change this?
Many sincere thanks for the great code and wonderful work!
Cheers,
wordman
An update…
As mentioned, my top navlinks are 164 x 28. I changed the js code in the index.html document making dropDownWidth 164px, then removing the padding: 20px; in the #navigation_horiz .dropdown.
Equally, I can leave in the padding of 20px and set dropDownWidth to 124px (to make up for 20px of padding per side). Either way works, I just wanted to pass this along!
Cheers,
wordman
One more update…
I got the button graphics in and working on my test page, which can be found here: http://www.g490.com/testpage/index.php
Your drop-down menu looks and performs wonderfully, thank you again for this excellent code.
I do have two follow-up questions:
I notice in Firefox that when I select a drop down menu and go to another page, once I get to the new page and mouse-over the drop downs, the drop down appears about 10px or so higher than the bottom of the navlink. Any thoughts there?
Second, (and this is of lesser importance) iPhones don’t seem to like the dropdown, When you trigger it it does not retract, it stays in position. Any suggestions for mobile development?
Again, many sincere thanks!
Cheers,
wordman
hi wordman, thanks for your comments, much appreciated! Glad you solved the problem you were having. At the moment this plugin is untested on iPhone/iPad, but I may look into this very soon. If you have a test page to show me the problem you are having in firefox, i may be able to help you, or DM (direct message) me the link on twitter at @mashedcreative
KT,
Thanks for the quick reply and for the offer to help out. I added a second page to my test site: http://www.g490.com/testsite/index.php and you can see the anomaly with the dropdown there. Select the Page 2 link in the navbar, it has a dropdown with 10 dummy links in it. The Page 2 link takes you to that page. Once you get there, mouse-over Page 2 and Link3 in the navbar. You will see the dropdown starting just below the link text, about 10px or so.
Funny thing is, if I do a ctrl-F5 refresh, this goes away. Equally, clicking the Home link clears it out as well since the Home page never seems to have this anomaly.
Any and all help you could lend would be sincerely appreciated. I really love this plugin!
Cheers,
wordman
Hi wordman, i will have a look tonight after work…
Just had a look, I can not recreate the problem, i think you may have fixed it, im looking at it in firefox and seems fine.
KT,
I just saw this post, went back and checked and you’re right. All is well. I have no idea why…
Anyhow, does this menu support multiple-layered menus?
Thanks!
Cheers,
wordman
not without some plugin modification… you could potentially though i guess…
Does your drop-down menu work on PHP pages as all my pages are PHP? if they do gould you email them to me. Also where did you get this plog? if it yours how much do you want for a copy of it.
yes it should work on PHP pages, i can’t see any reason why the plugin wouldn’t work or conflict with PHP pages… are you referring to the theme for this blog? We will be looking to create a similar theme which will be available in our store at some point…
KT,
I’m enjoying another successful deployment of the dropdown menu, and again wanted to thank you for such a great plugin.
As touch screens are part of life now, I’m curious to know when touchscreen support (iPhone, etc) will be made available for this menu?
Again, many thanks!
Sincerely,
wordman
thanks, no problems, i think you could always do a condition to check if iPad/iPhone device is being used and change the hover into a click, and do another conditional check to whether the menu is shown or not…. will see in the near future what I can come up with.
KT,
Thanks for that! I’ll look into it.
Now…
The gremlin is back, I mentioned it earlier, it’s a condition where at odd times (and seemingly not in every browser) the dropdown starts higher up than it should, as in it overlaps the top button by maybe 20px or so. For whatever reason, my current page isn’t doing it in Firefox, but I got a screen cap of it in Chrome. Here’s a link to the page: http://www.skyrockdesigns.com the portfolio link is the only one with a dropdown so far. Here’s a link to the screencap: http://www.xoverr.net/testsite/menu.jpg
As an FYI, the buttons are 138 x 38 with a 1px border.
I’m sure it’s something simple, but obviously, it’s got me stumped.
Thanks in advance!
sincerely,
wordman
Can you try appending the initialisation of the plugin at the end of the page, i.e. just before the body tag rather than in the head… it seems to not be reading the height of the button at times… might have to look into this a bit more.
KT,
To verify, do you mean in the space between (here) and ?
I agree with you, it is not reading the button height all the time, and this is the second installation in which this anomaly has occurred. Button sizes were different between the two pages.
Cheers,
wordman
or you can try putting the initialisation into
$(window).load(function(){ $('#navigation_horiz').naviDropDown({ ... }); });rather than the ready function. This ensures everything is loaded before the plugin gets initialised.
My apologies…it’s http://www.skyrockdesign.com
KT,
I added your suggestion and all appears to be well. Should I encounter any hang-ups, I’ll let you know, but for now it looks as though we got it!
Thank you!
Sincerely,
wordman
great! glad it’s working for you!
KT,
And thank you again for the timely support!
Sincerely,
wordman
KT,
Another question for you…
I tried altering my CSS file to allow for a “here” ID that would highlight the a button’s border a different color, as in, when you’re on the index.php page, the Home button has a different border color.
I know it should work, but it’s stumping me at the mo, so any thoughts you have would be greatly appreciated.
Again, many thanks!
Sincerely,
wordman
you could just add a new class to the active link, and style that class.
Hi,
I was having some flickering problem with Internet Explorer and resolve it by using (correctly ?) the hoverIntent plugin…
I’ve simply add the timeout to the hoverIntent plugin as it wasnt done on the version 1.0
Line 61 of the plugin you can find this line :
$this.find('li').hoverIntent(getDropDown, hideDropDown);Delete it and add instead :
var configHover = {
over: getDropDown, // function = onMouseOver callback (REQUIRED)
timeout: 300, // number = milliseconds delay before onMouseOut
out: hideDropDown // function = onMouseOut callback (REQUIRED)
};
$this.find('li').hoverIntent(configHover);
hi, yes the configuration could be used, but it’s not necessary, if you want to modify the timeouts then use the configuration if it helps resolve problems.
This dropdown is a life saver…thanks KT! I’m having one issue though…when you rollover the trigger icon the dropdown slides down with the form content I placed into it, but when I mouse down to fill in the form the dropdown slides up. Is there an attribute I can add to delay it a few seconds?
Can you have a look?
http://smokintunasaloon.com/lafund/lafundtest/dropdown.php
Thanks again for the very cool script.
hi thanks!, I had a look and it looks to be working as it should… I would probably avoid putting the form in there though, for usability might be better to just show a division and hide it when the form is submitted…
Pingback: 15 Newest Menu Plug-ins and Tutorials for jQuery | DesDevWeb
Hello, great job. Can I ask for help?
I use the “dropdown menu” in my landing pages for provide more information on mouseover menus. How do I set it to make sure that when I click on list 1, list 2 or list 3, the fall is in the same position of the list 1? Thanks a lot. My site is http://www.sitotest.eu/novadv/
Bye.
it appears you have already solved this?
Pingback: 30 Amazingly Great CSS Menu Tutorials | CS5 Design
Pingback: Inspiration 30 Amazingly Great CSS Menu Tutorials
Thanks for this great piece of code. I’ve used it the traditional way and tweaked it to roll up.
Great piece of code! :)
I have a question for a bit of help if it is not to complicated.
I would like the menu to show/hide 3 different divs with text when i roll over the 3 menu items i’ve made. Is this possible with a simple fix? :)
Best regards
Schmidt
i believe you could just add more elements with the class .dropdown
Pingback: Backlink Center » 30 Amazingly Great CSS Menu Tutorials
Pingback: List of CSS, jQuery And PHP Scripts | Techno Tab
Hi, lovely little plugin, thnx for your efforts.
Just wondering if anyone has any come across any issues with the menu not closing when you roll off onto content that is a link?
It seems in the site I am working on (can’t link at the mo’ apologies) that if you roll off the menu onto content below (for example) that is a link, the mouse doesn’t realise it’s left the dropdown as it’s (potentially) getting another signal from the link?
Cheers
Nate
the hideDropDown only gets called on hovering off the list item, anchorlinks shouldn’t affect this… you can email me the page if you like so i can have a look or on twitter @mashedcreative.
Pingback: Awesome jQuery Navigation Menu Plugins and Tutorials
I am new to jQuery. Found your site after literally hundreds of searches for a nice dropdown menu. :)
When users have their javascript turned off, the dropdown under each category would show/be visible. Is there a way to hide the drop down?
Also, is there a way to do more than one row for the dropdown? Thanks!
Hi Trina,
To hide the drop down menus when javascript is turned off, in your css add “display:none” to the class dropdown (or if you have changed it from its default, to whatever you have called it).
at the moment you can’t have more than one row of navigation.
Hi, first of all thanks for the plugin code.
I’m having trouble implementing this on a wordpress install. As far as I can tell the problem stems from the dropdown divs being given display: block. I noticed this occurs in the demo code but is overidden. However this isn’t happening on my install, even if I apply !important on the display: none in the js (this may be the wrong way of approaching this, I’m not js fluent).
I’d appreciate if you could confirm if this will work with wordpress or not?
Thanks,
Ivan.
Hi Ivan,
This should not conflict with wordpress, do you have a page i can look at ?
cheers
Hi KT
I am still very pleased with the code and it works perfectly.
But i need a little help (again), and hope it is an easy fix.
I would like the menu to drop down on click instead of rollover, is this possible? :)
Hi, it might take you a little extra work, but rather than using hoverIntent, you can bind a mouse click event, but you probably will need to do a check on whether the dropdown menu is shown when being clicked. This plugin is intended to be used with mouse hover.
Pingback: 15 Handpicked jQuery Drop Down Menus Tutorials | Easy jQuery
Nice menu! Is there a way to reposition the last horizontal dropdown so that it doesn’t go off the page if for example the menu goes to the full page width. I tried the following but it didn’t work:
#navigation_horiz ul li #dropdown_three {left: -140px;}
thanks Nick, you could just target the id of the last dropdown and position it from the left as -140px, something like:
$("#dropdown_last").css({"left", "-140px"});Pingback: 50+ Awesome jQuery Dropdown Menu Tutorials | Pulse2 Technology and Social Media News