Question

I’ve got a simple menubar with a hover effect:

http://www.bridgecitymedical.com/

Now, I’m adding sub-menus. I’d like (on hover of one tab), a div slides down with all the sub options inside for that corresponding div. I’m wordpress, so displaying the contents is as easy as using a built-in function, but what’s the best way to go about the drop down effect?

Here’s a picture of what I intend:

I figured I could create a div that size nested in each tab, then use jQuery to animate its dimensions outward like this:

$('.menu').hover(
  function () {
    $(this).animate ... etc
  }, 
  function () {
    $(this).animate ... etc
  }
);

But I would end up with a lot of silly divs around, wouldn’t be very clean. Any suggestions?

Answer 1

this way is very simple and effective.

var speed = 130; // milliseconds
$('.menu li').hover(function(e) {
    $(this).find('div').slideDown(speed);
}, function(e) {
    $(this).find('div').slideUp(speed);
});

If you want it to slide down and over at the same time, then you can use show() and hide() instead and it will automagically do that for you.

Edit:
For your div that pops down try adding margin-left equal to the width of the logo image.

Edit 2:
Careful with putting the div outside of the ul because now when you try to hover over the div it triggers the mouseleave (blur) event and causes the div to slide back up.

Try this is a workaround (or something to that effect):

var divEntered = false, open, close;
var closeFunction = function() {
    $('.sti-subitem').slideUp(150, function() {
        // set closed flag
    });
};
$('.sti-menu').hover(function() {
    $('.sti-subitem').slideDown(200);
}, function() {
    close = setTimeout(closeFunction, 600);
});

$('.sti-subitem').mouseenter(function() {
    clearTimeout(close);
});

$('.sti-subitem').mouseleave(function() {
    close = setTimeout(closeFunction, 600);
});