一款使用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();
})