Jquery Slide Down Menu

Question

Does anyone know if there is a JQuery plugin that will create a "slide down" menu similar to the one featured here : http://www.bu.edu/

Not sure if I am using the right term for this type of menu and I've been searching Google and StackOverflow for some time now with no success....

Thanks in advance!

Solution 1

Have you tried an approach without using js or jQuery?

I mean, you can do it just using HTML5 with CSS3 transitions.

It will look like this:

HTML:

<div id="menu">
<ul>
    <a href="#"><li>Menu 1</li></a>
    <a href="#"><li>Menu 2</li></a>
    <a href="#"><li>Menu 3</li></a>
    <a href="#"><li>Menu 4</li></a>
    <a href="#"><li>Menu 5</li></a>
    <a href="#"><li>Menu 6</li></a> 
</ul>

CSS

a {
font-family: verdana;
color: #fff;
font-size: 11px;   
}

a:hover {
color: #cff;    
}
#menu {

background: #666;
height: 30px;
width: 377px; 
transition:height 0.5s;
-webkit-transition:height 0.5s;
}

#menu:hover {
 height: 200px;     
}

ul {    
padding: 0; margin: 0;
padding-right: 10px;
position: absolute;    
}

ul li {
float: left;
display:block;
padding: 10px;
margin: 0;
background: #333;
border-right: 1px solid #666
}

#outset {
width: 377px; height: 200px;
background: #900;

}

check out this JsFiddle example

---

EDIT

To fit your question, I made some change in the code above and add a little jQuery. Like this:

$(document).ready(function() {
  $("#subMenu").hide(); 
});

$("#menu").hover(
  function() {
    $("#subMenu").show('fast');        
  },
  function() {
    $("#subMenu").hide('fast'); 
  }
);

You can see the results in this JsFiddle example

Solution 2

That would be very easy to build without a plugin. Create a sub-menu div and set display:none in the CSS.

Then create a hover listener to "slide down" the sub menu.

On the mouseout portion of the hover event, rather than simply closing the submenu, wrap the closing of the submenu in a setTimeout of 200ms, and then add a mouseover event in the submenu to cancel the setTimeout: (otherwise the submenu would close immediately upon leaving the menu)

var menuTimer;

$("#menu").hover(function() {
    //Slide down the submenu
    $("#sub_menu").slideDown();
}, function() {
    //Create a 200ms timer, after which it will close the sub_menu
    menuTimer = setTimeout(function() {
                        $("#sub_menu").slideUp();
                    },200);
});

$("#sub_menu").mouseenter(function() {
    //The user entered the submenu, so cancel the timer (don't close the submenu)
    clearTimeout(menuTimer);
});

Comments

[Akil A.]

Thanks everyone for your help! All of your answers were helpful. Here is the solution that I came up with so far: jsfiddle.net/akil_ja/jyrkV/2. Last question: if anyone can give me a tip on how to stop the menu from bouncing up and down like crazy when a user hovers in and out quickly, it would be much appreciated! (I'm suspecting setTimeout might be useful for this but not sure how to implement it...)

[Akil A.]

Thanks for the response Memolition. I may end up creating my own menu if no plugins are available but I figured that there was no point in re-inventing the wheel if there was one...

[Akil A.]

Thanks for the tip and example. The only problem with this solution is that the site needs to be accessible to screen readers and from my understanding, display none can cause some issues where the screen readers ignore the content....I may do something similar but animate the height to show/hide the secondary links instead...cheers

[Memolition]

Ok I really recommend you to make your own but look at this page I think it will help Dropdown Menus

[Akil A.]

Thanks for the link. I'm really looking for any examples/plugins that actually push the content below the menu down...not overlay the drop down options over the content. I am listening to your recommendation though, and I may just have to create this from scratch...cheers

[BBagi]

@AkilA then set the height to 0 and instead of using the slideDown and slideUp, animate the height using jQuery.animate

[Memolition]

yes it's better and to make that effect that the menu push the content down you can use css display:block; on each menu div

[RaphaelDDL]

+1 for no JS. But if the transition is needed and they are unsupported (a.k.a. IE, etc), just use .animate() (if using jQuery :D)

[Akil A.]

Thanks Christian and kudos for thinking outside of the box on this one. The only issue I can see with your example (for my application) is that I will have nested sub links and your html would need to be modified in order to accommodate for this. Otherwise your example is awesome...thanks!

[Akil A.]

Thanks! Only issue with this example is that I really want to show ALL of the sub options when the menu is hovered over....I think that this is one of the main advantages of this type of menu over a standard drop down...

[A. Cristian Nogueira]

@AkilA.Then you could try something like this example: jsfiddle.net/xWQ2Z

[Akil A.]

@Christian: NICE! That's pretty much what I was going for...thanks man :D

[A. Cristian Nogueira]

@AkilA. Glad to help!