Making a Slide in Menu using jQuery (Video tutorial)
Posted on May 1, 2008
This video tutorial shows how to make a basic slide in/drop down menu using jQuery. The menu itself stylishly slides in and has transparencies so you can view data behind it.
Sorry for the low sound, i was trying something different with my microphone.
Tags: code, jquery, video tutorial
Subscribe to feeds
May 2, 2008
Thanks for the tutorial I’ve been looking for this solution!
May 2, 2008
Sorry, I have a problem. When I use this and I put a link in the #drop_down div the mouseout function somehow activates and closes the div again.
Example here: http://www.e-techcomputers.com click on IBM Server option parts.
Any suggestions?
May 2, 2008
Hey Justin, it looks fine to me, i can’t see any problem with it. What are you trying to do?
May 6, 2008
Hi sorry for a late response back. I was trying to get the mouseout javascript function to work with the links in my div that is hiding.
It seems when you roll over a link within the div it shrinks the div.
It’s ok I have something that works for me now though. Thanks for the script.
May 8, 2008
I have created the tutorial like you show in the video and it is working. However, when you add rel=”nofollow” to the drop down menu items , it changes the way the menu works.
When you hover over one of the items in teh menu, it closes it down.
What is the work around for this? Is it a simple change of one of the JQuery functions?
May 8, 2008
It shouldn’t make a difference Ben. Can you give me a link to the menu?
May 21, 2008
So when you change your menu text items to links or other sub-divs the menu will collapse on their mouse-overs. Any way to prevent this and make it act like a normal menu system?
May 29, 2008
Nice work..
it is realy easy to learn from you…
June 2, 2008
Hey,
This looks great! It’s just what I’ve been looking for. Can you do like sub menus off the drop down? If so, how do you do this?
Thanks!
June 14, 2008
thanks for the tutorial it was great
see you
June 18, 2008
Thanks for this tutorial.
I was having a problem creating a menu like this, the only difference is I was using nested lists.
Would this work if I gave the UL tags a class or id?
I will try it your way and see how it turns out.
June 19, 2008
Hey I just wanted to say thank you for this awesome tutorial. You helped explain a lot and made it a lot easier to understand. Really appreciate it.
June 27, 2008
Just wanted to say that when providing tutorials like this you should be extra careful to use correct markup. If you’re making a list, then you should us UL and LI (or OL and LI). Other than that, thanks for the time and effort you put into this, very handy!
July 8, 2008
I’m experiencing the same thing as Ben.
Any tags inside the #dropdown div cause the menu to close. Plain text does not.
Also, I noticed using a list tag for your menu items also causes this behaviour.
Justin, what was your workaround?
July 14, 2008
I found your code in another of your websites and have been trying to get the litttle menu to work. Your video was great and I think I understand what’s going on, but neither the demo above nor my menu work – mine shows the top menu but won’t drop down the sub-menu. Yours shows both levels of the menu but doesn’t animate. Can you help me?
Thank you!
Nina
August 4, 2008
Hi ,
MEnu Should be Expanable Mode for the Screen.Need to disable the Mouse Over Event.
Please do the Needful
August 4, 2008
good job,
August 14, 2008
Thanx for the tutorial – soo helpful, I even got it!
For those having trouble with anchors in their menu, try substituting the mouseover event in the last function for mouseup, that way the menu will disappear once the users clicked on a link.
August 27, 2008
Hi guys, sorry I haven’t checked back to this page for a while, but if you replace the .show with .slideToggle it seems to have a better effect for me.
Here’s my code:
$(document).ready(function(){
$(“#drop-down-section”).hide();
$(“.anchor-for-function”).click(function() {
$(“#drop-down-section”).slideToggle(“slow”);
});
});
Give this a try, let me know what you think.
I found it’s better.
August 28, 2008
I was able to get links working in the menu by using mouseenter and mouseleave instead of mouseover and mouseout.
Note you have to bind “mouseenter” to the element rather than calling a mouseenter method on it.
August 29, 2008
Same problem with adding anything into the drop down div causing the div to hide.
September 24, 2008
Great tutorial on drop down animations. Just what I was looking for.
One thing though, you should try using unordered list for the SEO benefits. Easily done, jquery will just find the class or ID in the UL to show the list, and hide when your mouse moves.
Some of the problem’s I have had before on other animated menus is when you move to another div straight after. Sometimes just adding the hide to all div’s around the navigation works great.
October 7, 2008
i’m new to jQuery
Thanks for this tutorial.
October 14, 2008
Thanks , I need it .
December 28, 2008
[...] post is in reference to the jquery drop down menu tutorial [...]
May 29, 2009
[...] Making a Slide In Menu Using jQuery | Query7 – PHP jQuery Linux [...]