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

Question

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

到目前为止..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 效果来实现。

例如

将这段代码放在 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 下拉菜单淡出背景页面

Fade out of background page with JQuery dropdown menu

javascript

css

jquery

fadeout

drop-down-menu