CODEWITHSUNDEEP
jquerymenusubmenu
jq beginner
jq beginner

Reputation: 1070

multilevel menu is not displaying

i have this example here http://jsfiddle.net/65R8q/2/ for a multilevel submenu but it's not showing up because of using stop() to make the first sub menu steady how to fix this?

$(document).ready(function () {
    $(".cat").mouseover(function () {
        $(".sub1").slideDown(500, function () {
            $(this).css("display", "block");
        });
    });

    $(".cat").mouseout(function () {
        $(".sub1").slideUp(500, function () {
            $(this).css("display", "none");
        });
    });

    $(".sub1").mouseover(function () {
        $(this).css("display", "block").stop();
    });

    $(".sub1").mouseout(function () {
        $(this).slideUp(500, function () {
            $(this).css("display", "none");
        });
    });

    $(".item2").mouseover(function () {
        $(".sub2").slideDown(500, function () {
            $(this).css("display", "block");
        });
    });
});

Upvotes: 0

Views: 172

Answers (1)

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

I've cleared lots of css mistakes and lots of jQuery conflicts. At last i've manage to work this thing out.

Here is jsFiddle.

First of all you don't need to use callback function which manipulates css display: block/none after slideUp/slideDown because these methods automaticly hides/shows $(this) element after complete.

Second: You should select wrapper element for triggering nav. In your example you choose small element .cat, this is wrong. You should select biggest ele which wraps whole navigation. In your example: .menu

Third: Don't forgot to define top:0; left:0; when position protert used. If you don't define top/left values, it will create conflict on some browsers.

$(document).ready(function(){
    $('.menu').bind({
        mouseenter: function() {
            $(".sub1").stop(true,false).slideDown(500);
        },
        mouseleave: function() {
            $(".sub1").slideUp(500);
        }
    });

    $('.item2').bind({
        mouseenter: function() {
            $(".sub2").stop(true,false).slideDown(500);
        },
        mouseleave: function() {
            $(".sub2").slideUp(500);
        }
    });
});

Upvotes: 1

Related Questions