Question

我想创建一个类似于Edinburgh Zoo网站上的dropdwon菜单，该菜单在后台运行时淡出页面。

到目前为止有这个... jsfiddle 我无法弄清楚如何让背景消失，有什么想法？

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){

    }
);

$('#nav_menu').hover(
    function(){

    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);

Answer 1

您可以通过添加一个充当element效果的新back-drop来实现这一目标。

<强> E.g。

将此代码放在body代码的底部。

<div class="back-drop"></div>

然后为其分配css properties。

.back-drop {
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
}

另外，在您的css中将z-index: 9999;添加到#nav_menu。

#nav_menu {
    position: absolute;
    display: block;
    height: 80px;
    width: 100%;
    background: orange;
    z-index: 9999;
}

将此代码添加到 jquery 代码中。

$('.nav_menu_link_drop').hover(
        function() {
            $('.back-drop').css('display', 'block');
        },
        function() {
            $('.back-drop').css('display', 'none');

        }
);

另外，将$('.back-drop').css('display', 'block');和$('.back-drop').css('display', 'none');添加到$('.content').hover();。

$('.content').hover(
        function() {
            $('.back-drop').css('display', 'block');
            stop = true;
        },
        function() {
            $('.back-drop').css('display', 'none');
        }
);

这是JsFiddle link。

希望它有所帮助。

使用JQuery下拉菜单淡出背景页面

1 个答案: