开发者

Submenu navigation with hoverint problem

I have a navigation menu on three levels: a mainmenu always visible, a submenu and a subsubmenu.

The submenu and the subsubmenu should appear only on hovering. I'm using the hoverint jquery plugin with this configuration:

jQuery(function() {

    var mainmenu_cfg = {
        interval: 200,
over: openSubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubmenu
    };

    function openSubmenu() {
        $("ul#submenu").css('visibility', 'visible');
    }
    function closeSubmenu() {
        $("ul#submenu").css('visibility', 'hidden');
    }

    var submenu_cfg = {
        over: openSubsubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubsubmenu 
    }



    function openSubsubmenu() {
        console.info($(this).next());
        $(this).next().css('visibility', 'visible');
        $("ul#submenu").css('visibility', 'visible');
    }

    function closeSubsubmenu() {
        $(this).css('visibility', 'hidden');
        $(this).next().css('visibility', 'hidden');
    }

    $("li.servizi a").hoverIntent(mainmenu_cfg); 

    $("#submenu > li a").hoverIntent(submenu_cfg); 
});

What happens is that when I hover on a link in the mainmenu the first submenu appears correctly, but when I move the mouse over the submenu this disappears after a while (I suppose because the "closeSubmenu" function is called). The same would happen with the subsubmenu, I think, but I'm still stuck here, so...

How can I keep the submenu open? One more thing: the mainmenu is vertical and the first submenu is horizontal, so I need to call the hoverIntent function on the "a" element and not on the "li", otherwise it would activate for the whole "li" which is actually longer.

EDIT:

here's a demo: http://jsfiddle.net/dtBzE/

EDIT 2: I almost solved the issue adding a lot of conditionals. It's not perfect and needs optimizations, but it works:

jQuery(function() {

    var mainmenu_cfg = {
        interval: 200,
over: openSubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubmenu
    }
    var submenu_cfg = {
        over: openSubsubmenu,
sensitivity: 100,
timeout: 200,
out: closeSubsubmenu 
    }

    var subsubmenu_cfg = {
        over: onSubsubmenu,
sensitivity: 100,
timeout: 500,
out: offSubsubmenu 
    }

    var hover_submenu = false;
    var hover_subsubmenu = false;

    function openSubmenu() {
        $("ul#submenu").css('visibility', 'visible');
    }
    function closeSubmenu() {
        if (hover_submenu || hover_subsubmenu) {
            $("ul#submenu").css('visibility', 'visible');
            hover_submenu = false;
            hover_subsubmenu = false;
        }
        else {
            console.info(hover_submenu);
            console.info('close submenu');
            $("ul#submenu").css('visibility', 'hidden');
        }
    }


    function openSubsubmenu() {
        hover_submenu = true;
        $(this).next().css('visibility', 'visible');
    }

    function closeSubsubmenu() {

        if (!hover_subsubmenu)
            $(this).next().css('visibility', 'hidden');
        if (hover_submenu || hover_subsubmenu)
        {
            $("ul#submenu").css('visibility', 'visible');
            hover_submenu = false;
            hover_subsubmenu = false;
        }
        else if ((hover_submenu == true) && (hover_subsubmenu == false)) {
            $(this).next().css('visibility', 'hidden');
            $("ul#submenu").css('visibility', 'visible');
            hover_submenu = false;
        } else {
            $("ul#submenu").css('visibility', 'hidden');
        }
    }

    function onSubsubmenu() {
        hover_subsubmenu = true;
        $(this).parent().parent().css('visibility', 'visible');
    }

    function offSubsubmenu() {
        $(this).parent().pare开发者_开发问答nt().css('visibility', 'hidden');
    }

    $("li.servizi a").hoverIntent(mainmenu_cfg); 
    $("#submenu > li a").hoverIntent(submenu_cfg); 
  $("ul.subsubmenu > li a").hoverIntent(subsubmenu_cfg); 
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜