Trying to create a JQuery menu with a submenu that slides up on hover, and slides down when mouse exits

Question

Hi,

I've found someone with a tutorial showing what I'm essentially after, however, the demo is for a submenu that slides down instead of having the the submenu slide up above the menu item.

Here is the link to the tutorial:

http://www.darkscarab.com/blog/read.php?id=14

Here is the jQuery script it uses:

$(document).ready(function(){
    $(".submenu").slideUp(100, function(){$(".menu_item").css({overflow:'visible'})});
    $(".menu_item").hover(
        function(){
            if($(".submenu", this).queue().length < 2)
                $(".submenu", this).slideDown(500);
        },function(){
            $(".submenu", this).slideUp(500);
        }
    );
});

When I switch out the slideUp for slideDown and vice versa, the thing works well enough sliding up (works even when I don't switch them out!) - but the slide down that is supposed to happen when I exit doesn't really work. It is like the submenu disappears, and then finishes it's downward trajectory next time I hover on it.

Basically, it is all hiccup-y and very unreliable.

Anyone have any brilliant ideas for this novice?

Thank you so much!

Answer 1

.slideDown shows an element starting at height:0 and then animates the height property to its full value. .slideUp animates the height from its full value down to 0 and then hides the element. In order to create the animation that you want you can't just switch them around since you want slideUp to show instead of hide and vice-versa.

If I were to build what describe, I would abolutely position an element within a relatively positioned element at bottom:0 so that when I animate the height property it would grow from the bottom. Then I would create function mySlideUp() such that it .show()'s the inner element that's initially display:none; height:0 and then .animate({height:'auto'},'slow'). For function mySlideDown() I'd .animate({height:0},'slow') and then hide().

I hope that helps. Wrote it in pseudo-jQuery since you're a novice and it'd be beneficial for you to write it out yourself. Good luck!

Answer 2

For anyone looking for a navigation menu like the one I was trying to achieve, the following site may be of assistance:

http://www.mrbandfriends.co.uk/

But using mhr's advice, and in looking through how Mr. B coded their navigation, I was finally able to get a workable scroll up navigation with breadcrumbs.

Thank you!