word修订显示修订人
View demo 查看演示 Download Source 下载源
After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone!
在获得有关“美丽滑出导航”的大量反馈后，我对类似的水平导航有了一些新想法。 非常感谢大家！
Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order to see what menu items exit. So, I thought about labeling the menu items and making them stick out, so the user can always “see” what the navigation entails. Being in a horizontal position makes everything readable and when the user hovers over the label, the rest of the item with the icon will slide out.
就像Stefan Matei指出的那样，它可能很可爱，但是我们不希望用户先将鼠标悬停在所有选项上才能看到退出的菜单项。 因此，我考虑过标记菜单项并使其突出显示，以便用户始终可以“查看”导航的含义。 处于水平位置可使所有内容可读，并且当用户将鼠标悬停在标签上时，带有图标的项目的其余部分将滑出。
Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation.
尽管本教程与上一教程有关，但我还是从头开始-对于只对这种新导航感兴趣的读者。
The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. (It is not allowed to redistribute them under the free license, so I cannot include them in ZIP file of this tutorial.)
我们将要使用的图标与炫彩贴纸图标集1 ， 2 ， 3和4的DryIcons 。 (不允许在免费许可下重新分发它们，因此我不能将它们包括在本教程的ZIP文件中。)
Ok, let’s get to work.
好的，让我们开始工作。
1. HTML结构 (1. The HTML Structure)
The only thing we will need for the navigation is a simple unordered list with links and spans inside of the list elements:
导航唯一需要的是一个简单的无序列表，在列表元素内部具有链接和跨度：
<ul id="navigation"><li class="home"><a href=""><span>Home</span></a></li><li class="about"><a href=""><span>About</span></a></li><li class="search"><a href=""><span>Search</span></a></li><li class="photos"><a href=""><span>Photos</span></a></li><li class="rssfeed"><a href=""><span>Rss Feed</span></a></li><li class="podcasts"><a href=""><span>Podcasts</span></a></li><li class="contact"><a href=""><span>Contact</span></a></li></ul>
The spans will carry the names of your menu items. The list is getting an ID because we want to refer to it later in the JavaScript. With jQuery, we will make the link items slide out whenever we hover over the li elements of the list.
范围将带有菜单项的名称。 该列表获取了一个ID，因为我们想在以后JavaScript中引用它。 使用jQuery，只要将鼠标悬停在列表的li元素上，我们就可以使链接项滑出。
2. CSS (2. The CSS)
First, we define the CSS properties for the list:
首先，我们为列表定义CSS属性：
ul#navigation {position: fixed;margin: 0px;padding: 0px;top: 0px;right: 10px;list-style: none;z-index:999999;width:721px;}
We position the list in the top right corner of the page. The navigation should always be accessible for the user, even if he scrolls down the page. So, the position should be fixed. Margin and padding are explicitly set to 0, since the unordered list has default values for them. The navigation should also be on top of all other elements on the page. That’s why we set the z-index very high. The width is defined here, because I want to make the elements inside of the list floating. If I would not give this list an explicit width though, they would start moving and overlapping each other once I start resizing the page.In order to avoid that your floating elements start to e.g. move down when you resize the window, always put them in a container with a fixed width.(721px is the sum of all the li elements)
我们将列表放置在页面的右上角。 即使用户向下滚动页面，导航也应始终可访问。 因此，该位置应固定。 保证金和填充明确设置为0，因为无序列表具有默认值。 导航也应该在页面上所有其他元素的顶部。 这就是为什么我们将z-index设置得很高的原因。 在这里定义宽度，因为我想使列表内的元素浮动。 如果我不给此列表一个明确的宽度，一旦我开始调整页面大小，它们将开始移动并彼此重叠。为了避免浮动元素在调整窗口大小时开始向下移动，请始终将它们放在具有固定宽度的容器中。(721px是所有li元素的总和)
Now, let’s look at the list element properties:
现在，让我们看一下列表元素的属性：
ul#navigation li {width: 103px;display:inline;float:left;}
If you want a list to be shown horizontally, set the display of the elements toinline. This will make them be next to each other rather than under each other. For the links in the list elements, we define the following CSS properties:
如果要水平显示列表，请将元素的显示设置为inline。 这将使它们彼此相邻而不是彼此相邻。 对于列表元素中的链接，我们定义以下CSS属性：
ul#navigation li a {display: block;float: left;margin-top: -2px;width: 100px;height: 25px;background-color: #E7F2F9;background-repeat: no-repeat;background-position: 50% 10px;border: 1px solid #BDDCEF;text-decoration: none;text-align: center;padding-top: 80px;}
This is the common style for the link elements. We already define the properties for the background images that we will then put in separate class definitions. The text properties and the padding we need to set for the spans inside the link elements.The padding will push the spans to the bottom part.
这是链接元素的常用样式。 我们已经定义了背景图像的属性，然后将它们放在单独的类定义中。 我们需要为链接元素内的跨度设置文本属性和填充。填充会将跨度推到底部。
Let’s add some rounded borders (they don’t work in Internet Explorer, though) and make the items semi-transparent:
让我们添加一些圆角的边框(尽管它们在Internet Explorer中不起作用)，然后使项目变为半透明的：
ul#navigation li a {display: block;float:left;margin-top: -2px;width: 100px;height: 25px;background-color:#E7F2F9;background-repeat:no-repeat;background-position:50% 10px;border:1px solid #BDDCEF;text-decoration:none;text-align:center;padding-top:80px;-moz-border-radius:0px 0px 10px 10px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-khtml-border-bottom-right-radius: 10px;-khtml-border-bottom-left-radius: 10px;opacity: 0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
The last filter property will make this work for Internet Explorer as well.
最后一个过滤器属性也会使此功能也适用于Internet Explorer。
These were the common properties of all the link elements in the list. Now we will define the background image for the links in the specific list items:
这些是列表中所有链接元素的通用属性。 现在，我们将为特定列表项中的链接定义背景图片：
ul#navigation .home a{background-image: url(../images/home.png);}ul#navigation .about a{background-image: url(../images/id_card.png);}ul#navigation .search a{background-image: url(../images/search.png);}ul#navigation .podcasts a{background-image: url(../images/ipod.png);}ul#navigation .rssfeed a {background-image: url(../images/rss.png);}ul#navigation .photos a{background-image: url(../images/camera.png);}ul#navigation .contact a {background-image: url(../images/mail.png);}
When hovering over the elements, we want to change the background color in order to make them stand out a little bit more:
将鼠标悬停在元素上时，我们想更改背景颜色，以使其更加突出：
ul#navigation li a:hover{background-color:#CAE3F2;}
Now we just need to add some style to the spans:
现在我们只需要在跨度中添加一些样式即可：
ul#navigation li a span{letter-spacing:2px;font-size:11px;color:#60ACD8;text-shadow: 0 -1px 1px #fff;}
The text-shadow property will give the letters an engraved look (but it will not work in IE).
text-shadow属性将使字母具有雕刻外观(但在IE中将不起作用)。
And that was the CSS part. Now, let’s take a look at the JavaScript that will give some life to the navigation.
那就是CSS部分。 现在，让我们看一下将使导航更加生动JavaScript。
JavaScript (The JavaScript)
With jQuery we will first make all of the items disappear first in a “piano-like” way until the point that we can only see the text of the links. When hovering over an item, we will make the whole element slide out from the top. For all this, we define the following:
使用jQuery，我们将首先以“类似钢琴的方式”使所有项首先消失，直到我们只能看到链接的文本为止。 将鼠标悬停在某个项目上时，我们将使整个元素从顶部滑出。 为此，我们定义以下内容：
$(function() {var d=300;$('#navigation a').each(function(){$(this).stop().animate({'marginTop':'-80px'},d+=150);});$('#navigation > li').hover(function () {$('a',$(this)).stop().animate({'marginTop':'-2px'},200);},function () {$('a',$(this)).stop().animate({'marginTop':'-80px'},200);});});
For creating the piano-like effect we define that for each of the link elements the top margin should be set to -80 pixels (this will make them move to the top outside of the screen). The effect for the first element should last 300 + 150 milliseconds and then each further element should disappear with an additional delay of 150 milliseconds.
为了产生类似钢琴的效果，我们定义了每个链接元素的上边距应设置为-80像素(这将使它们移至屏幕外部的顶部)。 第一个元素的效果应持续300 + 150毫秒，然后每个其他元素应消失并附加150毫秒的延迟。
When hovering, we want the specific link element to get a top margin of -2 pixels, and that nicely animated, and not too slow (200 milliseconds). Moving the mouse out shall put the link element back to it’s old position (-80 pixels). The stop() function “stops all the currently running animations on all the specified elements” which gives the beautiful effect when, for example, hovering over all elements very quickly.
悬停时，我们希望特定的link元素的顶部空白为-2像素，并且动画效果很好，并且不要太慢(200毫秒)。 将鼠标移出将把链接元素放回原来的位置(-80像素)。 stop()函数“在所有指定的元素上停止所有当前正在运行的动画” ，例如在非常快地将鼠标悬停在所有元素上时，会产生漂亮的效果。
And that’s it! I hope you like it – enjoy!
就是这样！ 希望您喜欢–享受！
642-813 online course for those who want to learn jQuery. Our 642-813在线课程。 我们的 N10-004 guide and N10-004指南和 220-701 tutorial contain complete knowledge of jQuery to help you become expert. 220-701教程包含jQuery的完整知识，可帮助您成为专家。
翻译自: /codrops//12/08/beautiful-slide-out-navigation-revised/
word修订显示修订人
