Question

I have the following simple slide down hover menu.

 $(function(){
$('.sub-menu').hide();
$('.menu-item').hover(
    function () {
        var target = $(this).children('ul');
        $.browser.msie ? target.show() : target.slideDown(150);
    },
    function () {
        var target = $(this).children('ul')
        $.browser.msie ? target.hide() : target.slideUp(150);
    }
);

});

It slides down .sub-menu as you hover over .menu-item and slides back up when you leave, perfect.

I need it to slide up .sub-menu when you hover over .menu-item, vise versa to the above really..

I’ve done the obvious of swapping the slideUp and slideDown but it doesn’t seem to work.

Any ideas?

Many thanks if you can 🙂

Answer 1

$(function(){
    $('.menu-item').hover(
        function () {
            var target = $(this).children('ul');
            $.browser.msie ? target.hide() : target.slideUp(150);
        },
        function () {
            var target = $(this).children('ul')
            $.browser.msie ? target.show() : target.slideDown(150);
        }
    );
});

Should work, though I can’t test it without more code.

Basically I’m assuming .sub-menu is already showing, so when you hover over .menu-item you want to hide it, correct?

All that I changed was: I swapped around the two functions and removed the $('.sub-menu').hide(); that was at the beginning. It doesn’t need hiding before it actually slides up.

Edit: Working on your latest example.

Check it out here: http://jsfiddle.net/GwBuj/3/

What I did is:

• Change #button and #slider to
  classes (.button and .slider)
• Modify the CSS accordingly, and
  changed .slider CSS to allow for
  multiple buttons (You had it
  positioned absolutely which wouldn’t
  allow you to see the others)
• Adjust the JQuery code to work on multiple
  buttons
• Added another button to show
  you that it works