效果图
index.html
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"title>index</link rel="stylesheet" href="css/style.css"> body<!-- 导航nav --> ul id="navigation"li class="home"><a href=""span>Home></ali="about">About="search">Search="photos">Photos="rssfeed">Rss Feed="podcasts">Podcasts="contact">Contactuldiv ="info"> divscript src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'script="js/script.js"html>
style.css
ul#navigation { position:fixed; margin:0; padding: top: right:10px; list-style:none; z-index:999999; width:721px } ul#navigation li {103px; display:inline; float:left } ul#navigation li a {block;left; margin-top:-2px;100px; height:25px; background-color:#e7f2f9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #bddcef; -moz-border-radius:0 0 10px 10px; -webkit-border-bottom-right-radius: -webkit-border-bottom-left-radius: -khtml-border-bottom-right-radius: -khtml-border-bottom-left-radius: text-decoration: text-align:center; padding-top:80px; opacity:.7; filter:alpha(opacity=70) } ul#navigation li a:hover {#cae3f2 } ul#navigation li a span { letter-spacing:2px; font-size:11px; color:#60acd8; text-shadow:0 -1px 1px #fff } ul#navigation .home a { background-image:url(../images/home.png) } ul#navigation .about a {url(../images/id_card.png) } ul#navigation .search a {url(../images/search.png) } ul#navigation .podcasts a {url(../images/ipod.png) } ul#navigation .rssfeed a {url(../images/rss.png) } ul#navigation .photos a {url(../images/camera.png) } ul#navigation .contact a {url(../images/mail.png) } a.dry {absolute; bottom:15px; left:12px;#ccc; text-transform:uppercase;none }
script.js
$(function() { var d=300; $('#navigation a').each((){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( () { $('a',$()).stop().animate({ 'marginTop':'-2px'); },)).stop().animate({ 'marginTop':'-80px'); } ); });
图片素材如下