jquery 叠加分析
In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery.
在本教程中，我们将创建一个简单的菜单，当我们将鼠标悬停在菜单上时，该菜单将以深色覆盖覆盖菜单以外的所有内容，从而脱颖而出。 菜单将保持白色，并且子菜单区域将扩大。 我们将使用jQuery创建此效果。
So, let’s start!
所以，让我们开始吧！
标记 (The Markup)
The HTML structure will consist of a main wrapper div for the menu which will contain the overlay and the unordered list for the menu. The menu itself will have a link and a div element as submenu in its list elements. Each of the submenu elements will contain lists for the columns of the submenu where each one will have a heading list element:
HTML结构将由菜单的主包装div组成，其中将包含覆盖图和菜单的无序列表。 菜单本身将在其列表元素中具有一个链接和一个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>
The submenu divs will each have an inline style for the left position. As we will see, when we look at the style, we need to set this value since we want the submenu to be of absolute position, but within a relatively positioned container. So, in order to position all of the submenu divs at the beginning of the whole menu, we need to “pull” each div more to the left, hence we will have a negative left value for each div (decrementing 112px).
子菜单div的左侧位置将分别具有内联样式。 正如我们将看到的，当我们查看样式时，我们需要设置此值，因为我们希望子菜单处于绝对位置，但是在相对放置的容器中。 因此，为了将所有子菜单div定位在整个菜单的开头，我们需要将每个div进一步向左“拉”，因此，每个div的负值将为负(递减112像素)。
Let’s look at the style.
让我们看一下样式。
CSS (The CSS)
Make sure, that you reset the styles first (we don’t want any browser-defined padding or margin for the list). We will start by the overlay for the body, which is a simple div with an initial opacity of 0:
确保先重置样式(我们不希望列表使用任何浏览器定义的填充或边距)。 我们将从主体的覆盖开始，这是一个简单的div，初始不透明度为0：
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
The position will be set to fixed, since we want it to always stay on the top left corner filling the whole screen. The main menu list will have the following style:
该位置将被设置为固定，因为我们希望它始终位于整个屏幕的左上角。 主菜单列表将具有以下样式：
ul.oe_menu{
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
}
You might want to adapt its floatiness once you are planning to integrate this somewhere on your site. What is important, is the positioning of the list items:
一旦计划将其集成到站点中的某个位置，您可能想要适应其浮动性。 重要的是列表项的位置：
ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}
They will be positioned relatively so that we can have the absolutely positioned submenu elements. The anchor of the top layer menu will have the following style, forming the box:
它们将相对定位，以便我们可以拥有绝对定位的子菜单元素。 顶层菜单的锚点将具有以下样式，形成框：
ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
In our JavaScript we will add the class “hovered” to the main ul, once we move with the mouse over the menu, so that we can change all the anchors to white:
在我们JavaScript中，一旦我们将鼠标移到菜单上，我们将在主ul中添加“ hovered”类，以便可以将所有锚点更改为白色：
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
The submenu element will not be visible at the beginning, but only slide in when we hover over a top layer list element:
submenu元素在开始时将不可见，仅当我们将鼠标悬停在顶层list元素上时才滑入：
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:498px;
height:180px;
padding:30px;
display:none;
}
The style for the links inside of the submenu lists:
子菜单列表中链接的样式：
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
One of our submenu lists will be alone, so we want it to take all the space:
我们的子菜单列表之一将是单独的，因此我们希望它占据所有空间：
ul.oe_menu div ul.oe_full{
width:100%;
}
And if it’s not alone, we want it to have a width of 150px, so that we can have 3 floating next to each other:
如果不是一个人，我们希望它的宽度为150像素，这样我们就可以让3个浮点数彼此相邻：
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}
And finally, we want the heading of the submenu list to stand out:
最后，我们希望子菜单列表的标题突出：
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
}
And that’s all the style! Let’s continue with the effects using jQuery.
这就是所有样式！ 让我们继续使用jQuery的效果。
JavaScript (The JavaScript)
The main idea is to make an overlay appear that darkens everything on the page except the menu. We guarantee that the overlay stays under the menu because we placed it before the menu in the HTML structure. And the overlay stays on top of everything else because it all comes before in the HTML stucture. So, the z-indexes are in the wanted order. Consider that if you integrate this menu somewhere.
主要思想是使覆盖层出现，使菜单上除菜单外的所有内容都变暗。 因为我们将叠加层放置在HTML结构中，所以我们保证该叠加层位于菜单之下。 而且叠加层保留在其他所有东西之上，因为它早于HTML结构。 因此，z索引按所需顺序排列。 考虑一下，如果您将此菜单集成到某处。
Let’s first cache some elements:
让我们首先缓存一些元素：
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
When we hover any of the menu items, we will add the classes “slided” and “selected” to the item. The corresponding submenu div will get slided out and all the other ones will get hidden. We also give a very high z-index to the current submenu. When we move the mouse out, we will remove the class “selected”:
当我们将鼠标悬停在任何菜单项上时，我们将在菜单项中添加“滑动”和“选定”类。 相应的子菜单div将滑出，所有其他子菜单将被隐藏。 我们还为当前子菜单提供了很高的z索引。 当我们将鼠标移出时，我们将删除“ selected”类：
$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');
});
The class “selected” is needed for the style, while the class “slided” is a helper class that let’s us identify which item is currently “in use”.
样式需要“ selected”类，而“ slided”类是帮助器类，让我们确定当前“正在使用”哪个项目。
Now, we will take care of the overlay by defining what happens when we enter the whole menu wrapper. We will fade the overlay to an opacity of 0.6 and add the class “hovered” to the wrapper, so that the anchors stay white:
现在，我们将通过定义进入整个菜单包装程序时发生的情况来处理覆盖。 我们将叠加层淡化为0.6的不透明度，并在包装器中添加“悬停”类，以便锚点保持白色：
$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();
})
And that’s it! We hope you had fun with this tutorial and found it useful!
就是这样！ 我们希望您对本教程感兴趣，并发现它很有用！
翻译自: https://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
jquery 叠加分析
扫一扫
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
