当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/07/02 来源:互联网 浏览: 关键词:jquery 下拉菜单 遮罩 
jQuery下拉菜单鼠标滑过全屏遮罩特效 jQuery下拉菜单鼠标滑过全屏遮罩特效
阿里云

简要教程

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

HTML

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

<divclass="oe_wrapper">
    <divid="oe_overlay"class="oe_overlay"></div>
    <ulid="oe_menu"class="oe_menu">
        <li>
            <ahref="">Collections</a>
            <div>
                <ul>
                    <liclass="oe_heading">
                        Summer 2011
                    </li>
                    <li><ahref="#">Milano</a></li>
                    ...
                </ul>
                <ul>
                    ...
                </ul>
                <ul>
                    ...
                </ul>
            </div>
        </li>
        <li>
            <ahref="">Projects</a>
            <divstyle="left:-111px;">
                ...
            </div>
        </li>
        <li>
            <ahref="">Fragrances</a>
            <divstyle="left:-223px;">
                <ulclass="oe_full">
                    <liclass="oe_heading">
                        Fashion Fragrances
                    </li>
                    <li><ahref="#">Deálure</a></li>
                    <li><ahref="#">Violet Woman</a></li>
                    <li><ahref="#">Deep Blue for Men</a></li>
                    <li><ahref="#">New York, New York</a></li>
                    <li><ahref="#">Illusion</a></li>
                </ul>
            </div>
        </li>
        <li><ahref="">Events</a>
            <divstyle="left:-335px;">
                ...
            </div>
        </li>
        <li><ahref="">Stores</a>
            <divstyle="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代码请参考下载文件。

共有人阅读,期待你的评论!评论
Top