精美的滑出式水平导航特效

一个精美的滑出式水平导航特效，打开页面只能看到文本链接，用户将鼠标悬停于标签上时，该导航菜单项目会滑出。

预览     下载源码

1、HTML结构

导航实现仅用一个简单的无序列表

<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>

2、CSS

首先我们要让导航（位置列表）固定在页面的右上角。

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}

列表元素的属性:

ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}
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;
}
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);
}
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);
}
/* 悬停在元素的时候,我们想要改变背景颜色以使他们脱颖而出一点: */
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
/* 文本阴影属性将给字母一个镂雕(但不会工作在IE)。 */
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;
}

这是CSS的部分。现在,让我们看看JavaScript代码。

3、JavaScript

使用jQuery,我们第一要让所有的导航元素消失,直到我们只能看到的文本链接。悬停在一个项目的时候,我们会让整个元素从上面滑出。js代码如下:

$(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);
    }
);
});

为每个链接元素的顶部边缘设置为-80像素(这将使它们移动到屏幕的顶部外)。

为实现漂亮的动画效果,而又不是太慢(设置200毫秒)。移动鼠标,应当把link元素回到它的老位置(-80像素)。