jQuery下拉菜单鼠标滑过全屏遮罩特效

这是一款效果非常不错的jQuery下拉菜单鼠标滑过全屏遮罩特效插件。

HTML

菜单使用一个无序列表遮罩，class为oe_overlay的div将用来做全屏遮罩：

<div class="oe_wrapper">
    <div id="oe_overlay" class="oe_overlay"></div>
    <ul id="oe_menu" class="oe_menu">
        <li>
            <a href="">Collections</a>
            <div>
                <ul>
                    <li class="oe_heading">
                        Summer 2011
                    </li>
                    <li><a href="#">Milano</a></li>
                    ...
                </ul>
                <ul>
                    ...
                </ul>
                <ul>
                    ...
                </ul>
            </div>
        </li>
        <li>
            <a href="">Projects</a>
            <div style="left:-111px;">
                ...
            </div>
        </li>
        <li>
            <a href="">Fragrances</a>
            <div style="left:-223px;">
                <ul class="oe_full">
                    <li class="oe_heading">
                        Fashion Fragrances
                    </li>
                    <li><a href="#">Deálure</a></li>
                    <li><a href="#">Violet Woman</a></li>
                    <li><a href="#">Deep Blue for Men</a></li>
                    <li><a href="#">New York, New York</a></li>
                    <li><a href="#">Illusion</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">Events</a>
            <div style="left:-335px;">
                ...
            </div>
        </li>
        <li><a href="">Stores</a>
            <div style="left:-447px;">
                ...
            </div>
        </li>
    </ul>
</div>
                

JAVASCRIPT

首先设置一下变量参数：

var $oe_menu        = $('#oe_menu');
var $oe_menu_items  = $oe_menu.children('li');
var $oe_overlay     = $('#oe_overlay');
                

当鼠标hover任何的菜单项时，将为它添加classslided和selected。这时相应的二级菜单将从上边滑出，其他的将回缩。这里将二级菜单的z-index设置为一个很大的数。当鼠标移出菜单，将去除classselected。

$oe_menu_items.bind('mouseenter',function(){
    var $this = $(this);
    $this.addClass('slided selected');
    $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
        $oe_menu_items.not('.slided').children('div').hide();
        $this.removeClass('slided');
    });
}).bind('mouseleave',function(){
    var $this = $(this);
    $this.removeClass('selected').children('div').css('z-index','1');
});
                

下面来看一下遮罩层的代码。将遮罩层的透明度调整到0.6，并在wrapper上添加classhovered，这样菜单仍然显示是白色的。

$oe_menu.bind('mouseenter',function(){
    var $this = $(this);
    $oe_overlay.stop(true,true).fadeTo(200, 0.6);
    $this.addClass('hovered');
}).bind('mouseleave',function(){
    var $this = $(this);
    $this.removeClass('hovered');
    $oe_overlay.stop(true,true).fadeTo(200, 0);
    $oe_menu_items.children('div').hide();
})
                

css代码请参考下载文件。