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: , ,

26 Responses

  1. Justin Hinchcliffe
    May 2, 2008

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


  2. Justin Hinchcliffe
    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?


  3. Panzer
    May 2, 2008

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


  4. Justin Hinchcliffe
    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.


  5. Ben
    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?


  6. Panzer
    May 8, 2008

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


  7. Eric
    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?


  8. nafis
    May 29, 2008

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


  9. Mathew
    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!


  10. islam
    June 14, 2008

    thanks for the tutorial it was great ;)
    see you


  11. vince
    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.


  12. de_an777
    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.


  13. Nick
    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!


  14. Steve
    July 8, 2008

  15. Nina
    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


  16. Sivanath
    August 4, 2008

    Hi ,

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


  17. TyroneGlover
    August 4, 2008

    good job,


  18. Rumyra
    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.


  19. Justin
    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.


  20. Andy Stewart
    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.


  21. Aaron
    August 29, 2008

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


  22. Jimi Youngs
    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.


  23. dimi
    October 7, 2008

    i’m new to jQuery
    Thanks for this tutorial.


  24. Omid
    October 14, 2008

    Thanks , I need it .


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


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


Leave a Reply

You must be logged in to post a comment.


Loading ...