Making a Slide in Menu using jQuery (Video tutorial)

Published by Panzer
May 01

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.

Demo File

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • bodytext
  • description
  • Slashdot
  • Technorati
  • Sphinn
  • del.icio.us
  • Facebook
  • Google
Filed under: code, jquery, videotutorial, , ,

12 Responses

  1. Justin Hinchcliffe Says:

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

    Posted on May 2nd, 2008 at 2:03 pm

  2. Justin Hinchcliffe Says:

    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?

    Posted on May 2nd, 2008 at 4:44 pm

  3. Panzer Says:

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

    Posted on May 2nd, 2008 at 8:33 pm

  4. Justin Hinchcliffe Says:

    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.

    Posted on May 6th, 2008 at 1:14 pm

  5. Ben Says:

    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?

    Posted on May 8th, 2008 at 6:42 am

  6. Panzer Says:

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

    Posted on May 8th, 2008 at 11:53 pm

  7. Eric Says:

    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?

    Posted on May 21st, 2008 at 5:36 pm

  8. nafis Says:

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

    Posted on May 29th, 2008 at 7:50 pm

  9. Mathew Says:

    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!

    Posted on June 2nd, 2008 at 11:40 am

  10. islam Says:

    thanks for the tutorial it was great ;)
    see you

    Posted on June 14th, 2008 at 5:22 am

  11. vince Says:

    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.

    Posted on June 18th, 2008 at 2:06 pm

  12. de_an777 Says:

    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.

    Posted on June 19th, 2008 at 8:11 am

Leave a Reply