Comments on: Making a Slide in Menu using jQuery (Video tutorial)

By: All my bookmarks ever | Daniel John Gayle

All my bookmarks ever | Daniel John Gayle — Sat, 30 May 2009 00:11:26 +0000

[...] Making a Slide In Menu Using jQuery | Query7 – PHP jQuery Linux [...]

By: jQuery Slidedown Menu Revised | Query7

jQuery Slidedown Menu Revised | Query7 — Mon, 29 Dec 2008 05:57:21 +0000

[...] post is in reference to the jquery drop down menu tutorial [...]

By: Omid

Omid — Tue, 14 Oct 2008 18:47:51 +0000

Thanks , I need it .

By: dimi

dimi — Tue, 07 Oct 2008 13:31:39 +0000

i’m new to jQuery
Thanks for this tutorial.

By: Jimi Youngs

Jimi Youngs — Wed, 24 Sep 2008 10:29:41 +0000

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.

By: Aaron

Aaron — Fri, 29 Aug 2008 21:46:56 +0000

Same problem with adding anything into the drop down div causing the div to hide.

By: Andy Stewart

Andy Stewart — Thu, 28 Aug 2008 11:39:34 +0000

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.

By: Justin

Justin — Wed, 27 Aug 2008 22:56:10 +0000

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.

By: Rumyra

Rumyra — Thu, 14 Aug 2008 15:16:25 +0000

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.

By: TyroneGlover

TyroneGlover — Mon, 04 Aug 2008 13:42:49 +0000

good job,

By: Sivanath

Sivanath — Mon, 04 Aug 2008 07:13:23 +0000

Hi ,

MEnu Should be Expanable Mode for the Screen.Need to disable the Mouse Over Event.
Please do the Needful

By: Nina

Nina — Mon, 14 Jul 2008 21:05:19 +0000

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

By: Steve

Steve — Tue, 08 Jul 2008 04:08:35 +0000

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?

By: Nick

Nick — Fri, 27 Jun 2008 06:39:48 +0000

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!

By: de_an777

de_an777 — Thu, 19 Jun 2008 12:11:20 +0000

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.

By: vince

vince — Wed, 18 Jun 2008 18:06:53 +0000

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.

By: islam

islam — Sat, 14 Jun 2008 09:22:38 +0000

thanks for the tutorial it was great
see you

By: Mathew

Mathew — Mon, 02 Jun 2008 15:40:28 +0000

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!

By: nafis

nafis — Thu, 29 May 2008 23:50:42 +0000

Nice work..
it is realy easy to learn from you…

By: Eric

Eric — Wed, 21 May 2008 21:36:01 +0000

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?

By: Panzer

Panzer — Fri, 09 May 2008 03:53:45 +0000

It shouldn’t make a difference Ben. Can you give me a link to the menu?

By: Ben

Ben — Thu, 08 May 2008 10:42:55 +0000

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?

By: Justin Hinchcliffe

Justin Hinchcliffe — Tue, 06 May 2008 17:14:56 +0000

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.

By: Panzer

Panzer — Sat, 03 May 2008 00:33:01 +0000

Hey Justin, it looks fine to me, i can’t see any problem with it. What are you trying to do?

By: Justin Hinchcliffe

Justin Hinchcliffe — Fri, 02 May 2008 20:44:03 +0000

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?

By: Justin Hinchcliffe

Justin Hinchcliffe — Fri, 02 May 2008 18:03:23 +0000

Thanks for the tutorial I’ve been looking for this solution!