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

当前位置:主页 > jQuery库 > 菜单和导航 > jQuery下拉菜单鼠标滑过全屏遮罩特效
jQuery下拉菜单鼠标滑过全屏遮罩特效
分享:

    插件介绍

    这是一款使用jQuery制作的下拉菜单鼠标滑过全屏遮罩特效插件。该下拉菜单插件当鼠标滑过菜单项时,会出现一个半透明的全屏遮罩将屏幕遮住,效果十分不错。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-03
    阅读:

简要教程

这是一款效果非常不错的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任何的菜单项时,将为它添加classslidedselected。这时相应的二级菜单将从上边滑出,其他的将回缩。这里将二级菜单的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代码请参考下载文件。