jQuery顶部自动隐藏菜单导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery顶部自动隐藏菜单导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Beautiful Fixed Slide Out Navigation - Codrops</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
</head>
<style>
body { background:#fff url(desc.png) no-repeat top center; font-family:Arial; height:2000px; }
.header { width:600px; height:56px; position:absolute; top:50%; left:10px; background:#fff url(title.png) no-repeat top left; }
a.back { width:256px; height:73px; position:absolute; bottom:15px; right:15px; background:#fff url(codrops_back.png) no-repeat top left; }
a.dry { position:absolute; bottom:15px; left:15px; text-align:left; font-size:12px; color:#ccc; text-transform:uppercase; text-decoration:none; }
</style>
<body>
<div class="header"></div>
<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>

<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript">
            $(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);
                }
            );
            });
        </script>
</body>
</html>

CSS代码(style.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;-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;text-decoration:none;text-align:center;padding-top:80px;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
ul#navigation li a:hover{background-color:#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{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);}

附件:下载该文件资源,减少时间成本(增值服务)