Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.
今天，我们将创建一个折叠菜单，其中包含垂直导航栏和一个滑出内容区域。 将鼠标悬停在菜单项上时，图像从顶部向下滑动，子菜单从底部向上滑动。 单击子菜单项之一将使整个菜单像卡片组一样折叠，相应的内容区域将滑出。
The beautiful fashion photos are taken from Beyrouth’s photostream on flickr. The specific set can be found here.
精美的时尚照片是从Beyrouth在flickr上的照片流中拍摄的。 具体的设置可以在这里找到。
So, let’s get started!
所以，让我们开始吧！
标记 (The Markup)
Our HTML will consist of a main container with the class and id “cc_menu”. Here we will place all our vertical menu items and the main content div:
我们HTML将包含一个主容器，其类别和ID为“ cc_menu”。 在这里，我们将放置所有垂直菜单项和主要内容div：
<div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:5;">
<img src="images/1.jpg" alt="image" />
<span class="cc_title">Collection</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_1">Winter 2010</li>
<li class="cc_content_2">Spring 2011</li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:4;">
<img src="images/2.jpg" alt="image" />
<span class="cc_title">Stores</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3">Milano</li>
<li class="cc_content_4">Paris</li>
</ul>
</div>
</div>
...
<div id="cc_content" class="cc_content">
<span id="cc_back" class="cc_back"><< Go back</span>
<div class="cc_content_1">
<h1>Winter 2010</h1>
<p>Some content</p>
</div>
<div class="cc_content_2">
<h1>Spring 2011</h1>
<p>Some content</p>
</div>
...
</div>
</div>
The first item will get a z-index of 5 and then we will decrease the z-index for the next items. This will make the last item be in the lowest layer. We do this in order to create the card deck collapsing effect.
第一项的z-index为5，然后我们将减少下一项的z-index。 这将使最后一项位于最低层。 我们这样做是为了创建卡片组折叠效果。
Each submenu item will share its class with the respective content div. Like that we can make the right content div appear whenever we click on a submenu item.
每个子菜单项将与各自的内容div共享其类。 这样，只要单击子菜单项，就可以显示正确的内容div。
Let’s take a look at the styling.
让我们来看看样式。
CSS (The CSS)
Our main div that surrounds everything will have the following style:
我们围绕所有内容的主要div将具有以下样式：
.cc_menu{
width:700px; /*140px * 5*/
height:600px;
position:relative;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
The width of this container is the sum of all the item widths which is 5 times 140 pixels.
此容器的宽度是所有项目宽度的总和，为5乘以140像素。
The style of each navigation item will be the following:
每个导航项的样式如下：
.cc_item{
text-align:center;
width:140px;
height:600px;
float:left;
border-bottom:1px solid #000;
background:#444 url(../images/bg.png) repeat top left;
position:relative;
-moz-box-shadow:3px -3px 10px #000;
-webkit-box-shadow:3px -3px 10px #000;
box-shadow:3px -3px 10px #000;
}
We will give each item a box shadow so that the layering becomes visible. (That does not work in IE yet, so you will have to add a border or some other background image that enhances this.)
我们将为每个项目提供一个盒子阴影，以便使分层变得可见。 (这在IE中尚不可用，因此您必须添加边框或其他可以增强此效果的背景图像。)
The title in each menu element will have a dark background with a subtle shadow around:
每个菜单元素中的标题将具有深色背景，周围带有微妙的阴影：
span.cc_title{
color:#fff;
font-size:16px;
top:200px;
left:5px;
position:absolute;
padding:3px 0px;
background:#111;
width:130px;
display:block;
z-index:11;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
The submenu list will be styled as follows:
子菜单列表的样式如下：
.cc_submenu ul{
list-style:none;
width:140px;
margin:0;
padding:0;
height:0px; /*increase to 200px to slide up*/
overflow:hidden;
text-align:left;
background:#000;
position:absolute;
left:0px;
bottom:0px;
opacity:0.7;
z-index:13;
}
We will position the list at the bottom of the item and give it a height of 0 pixel. We will then increase the height to 200 pixels for it to slide up from the bottom.
我们将列表放置在项目的底部，并将其高度设置为0像素。 然后，我们将高度增加到200像素，以使其从底部向上滑动。
The list elements of the submenu list will have the following style:
子菜单列表的列表元素将具有以下样式：
.cc_submenu ul li{
color:#ddd;
cursor:pointer;
padding:10px;
}
The image that will slide in from the top will be positioned negatively, meaning that we will hide it at the top of the item and the page:
从顶部滑入的图像的位置将为负，这意味着我们将其隐藏在项目和页面的顶部：
.cc_item img{
position:absolute;
width:140px;
height:600px;
top:-600px;
left:0px;
}
In our JavaScript function we will make it slide down from the top by animating the top value to 0px.
在我们JavaScript函数中，通过将顶部值动画化为0px，使它从顶部向下滑动。
The div that surrounds all the contents will also be hidden to the left of the page by setting the left value to -700 pixels:
通过将左值设置为-700像素，包围所有内容的div也将隐藏在页面左侧：
.cc_content{
width:600px;
height:600px;
border-bottom:1px solid #000;
position:absolute;
left:-700px;
background:#444 url(../images/bg.png) repeat top left;
overflow:hidden;
-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;
}
The single content divs will have the following style:
单个内容div将具有以下样式：
.cc_content div{
display:none;
margin:20px;
}
We will give each paragraph the following style:
我们将为每个段落提供以下样式：
.cc_content p{
background:#000;
padding:20px;
opacity:0.7;
}
And finally, we will position the back span at the bottom right of the content container:
最后，我们将后跨放置在内容容器的右下角：
span.cc_back{
position:absolute;
bottom:10px;
right:10px;
cursor:pointer;
color:#ddd;
}
And that was the style. Now, let’s take a look at the JavaScript magic.
那就是风格。 现在，让我们看一下JavaScript的魔力。
JavaScript (The JavaScript)
We will have several function taking care of the behavior of our navigation. Whenever we hover a menu item, we want the image to slide in from the top and the submenu to slide in from the bottom. And, of course, when we leave an item, we want the reverse to happen. The functions m_enter and m_leave take care of that behavior. The function fold will make the menu collapse once a submenu item is clicked. The initial position is recovered by the function unfold. The two functions showContent and hideContent take care of the respective content appearing and disappearing.
我们将有几个功能来照顾我们的导航行为。 每当我们将鼠标悬停在菜单项上时，我们都希望图像从顶部滑入，子菜单从底部滑入。 而且，当然，当我们离开一个项目时，我们希望相反的事情发生。 函数m_enter和m_leave负责该行为。 单击子菜单项后，功能折叠将使菜单折叠。 通过功能展开恢复初始位置。 showContent和hideContent这两个函数负责相应内容的出现和消失。
In our main jQuery function we will start by defining some variables:
在我们的主要jQuery函数中，我们将从定义一些变量开始：
//all the menu items
var $items = $('#cc_menu .cc_item');
//number of menu items
var cnt_items = $items.length;
//if menu is expanded then folded is true
var folded = false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;
Now we will bind the mouseenter and the mouseleave to each item. We will also bind the click event to list elements in the submenu:
现在，我们将mouseenter和mouseleave绑定到每个项目。 我们还将绑定click事件到子菜单中的列表元素：
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave)
.find('.cc_submenu > ul > li')
.bind('click',function(){
var $li_e = $(this);
//if the menu is already folded,
//just replace the content
if(folded){
hideContent();
showContent($li_e.attr('class'));
}
else //fold and show the content
fold($li_e);
});
In the following we will define the m_enter function:
在下面，我们将定义m_enter函数：
function m_enter(){
var $this = $(this);
clearTimeout(menu_time);
menu_time = setTimeout(function(){
//img
$this.find('img').stop().animate({'top':'0px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
},200);
}
The timeout is used to prevent this event to trigger if the user moves the mouse with a considerable speed through the menu items.
如果用户以相当高的速度在菜单项中移动鼠标，则超时用于防止触发此事件。
The m_leave function is defined as follows:
m_leave函数的定义如下：
function m_leave(){
var $this = $(this);
clearTimeout(menu_time);
//img
$this.find('img').stop().animate({'top':'-600px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
}
When clicking on the back span, we want the unfold function to trigger:
当单击后退跨度时，我们希望触发展开功能：
$('#cc_back').bind('click',unfold);
The fold function will show only the menu column of the chosen submenu and make all the other items animate to the left by setting the margin to -140 pixels:
折叠功能将仅显示所选子菜单的菜单列，并通过将空白设置为-140像素，使所有其他项目向左移动。
function fold($li_e){
var $item = $li_e.closest('.cc_item');
var d = 100;
var step = 0;
$items.unbind('mouseenter mouseleave');
$items.not($item).each(function(){
var $item = $(this);
$item.stop().animate({
'marginLeft':'-140px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e.attr('class'));
}
});
});
}
The unfold function shows all the menu items and also hides any item’s image and submenu that might be displayed:
展开功能显示所有菜单项，还隐藏可能显示的任何项目的图像和子菜单：
function unfold(){
$('#cc_content').stop().animate({'left':'-700px'},600,function(){
var d = 100;
var step = 0;
$items.each(function(){
var $item = $(this);
$item.find('img')
.stop()
.animate({'top':'-600px'},200)
.andSelf()
.find('.cc_submenu > ul')
.stop()
.animate({'height':'0px'},200);
$item.stop().animate({
'marginLeft':'0px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = false;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave);
hideContent();
}
});
});
});
}
The function to show the content will animate our content container to the right by setting the left value to 140 pixels. It will also fade in the respective content:
通过将左侧的值设置为140像素，显示内容的功能将使我们的内容容器在右侧进行动画处理。 它也会淡入相应的内容：
function showContent(idx){
$('#cc_content').stop().animate({'left':'140px'},200,function(){
$(this).find('.'+idx).fadeIn();
});
}
And finally, the function to hide the content:
最后，隐藏内容的函数：
function hideContent(){
$('#cc_content').find('div').hide();
}
To cufonize the font in our menu, we will simply add these lines to the head of our HTML:
为了对菜单中的字体进行样式化，我们只需将这些行添加到HTML的开头：
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Liberation_Sans.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('span');
Cufon.replace('li');
Cufon.replace('h1');
Cufon.replace('p');
</script>
We will be using the font Liberation Sans which you can also find here.
我们将使用字体Liberation Sans，您也可以在这里找到。
And that’s all! We hope you enjoyed this tutorial and find it useful!
就这样！ 我们希望您喜欢本教程并发现它有用！
翻译自: https://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/
扫一扫
2978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
