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>Fancy Apple-Style Icon 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 { margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial; }
.title { position:absolute; top:100px; left:50%; margin-left:-204px; width:409px; height:348px; background:transparent url(title.png) no-repeat top left; }
.info { position:fixed; bottom:0px; left:0px; }
.back { display:block; background:transparent url(back.png) no-repeat top left; width:281px; height:143px; }
a.dry { position:absolute; bottom:10px; right:10px; color:#000; font-weight:bold; font-size:16px; }
</style>
<body>
<div class="title"></div>
<div class="navigation">
  <ul class="menu" id="menu">
    <li><span class="ipod"></span><a href="" class="first">Players</a></li>
    <li><span class="video_camera"></span><a href="">Cameras</a></li>
    <li><span class="television"></span><a href="">TVs</a></li>
    <li><span class="monitor"></span><a href="">Screens</a></li>
    <li><span class="toolbox"></span><a href="">Tools</a></li>
    <li><span class="telephone"></span><a href="">Phones</a></li>
    <li><span class="print"></span><a href="" class="last">Printers</a></li>
  </ul>

<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript">
            $(function() {
                var d=1000;
                $('#menu span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
                }
            );
            });
        </script>
</body>
</html>

CSS代码(style.css):

.navigation{position:relative;margin:0 auto;width:915px;}
ul.menu{list-style:none;font-family:"Verdana",sans-serif;border-top:1px solid #bebebe;margin:0px;padding:0px;float:left;}
ul.menu li{float:left;}
ul.menu li a{text-decoration:none;background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;padding:15px 0px;width:128px;color:#333333;float:left;text-shadow:0 1px 1px #fff;text-align:center;border-right:1px solid #a1a1a1;border-left:1px solid #e8e8e8;font-weight:bold;font-size:13px;-moz-box-shadow:0 1px 3px #555;-webkit-box-shadow:0 1px 3px #555;}
ul.menu li a.hover{background-image:none;color:#fff;text-shadow:0 -1px 1px #000;}
ul.menu li a.first{-moz-border-radius:0px 0px 0px 10px;-webkit-border-bottom-left-radius:10px;border-left:none;}
ul.menu li a.last{-moz-border-radius:0px 0px 10px 0px;-webkit-border-bottom-right-radius:10px;}
ul.menu li span{width:64px;height:64px;background-repeat:no-repeat;background-color:transparent;position:absolute;z-index:-1;top:80px;cursor:pointer;}
ul.menu li span.ipod{background-image:url(../icons/ipod.png);left:33px;/*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{background-image:url(../icons/video_camera.png);left:163px;/* plus 128 + 2px of border*/
}
ul.menu li span.television{background-image:url(../icons/television.png);left:293px;}
ul.menu li span.monitor{background-image:url(../icons/monitor.png);left:423px;}
ul.menu li span.toolbox{background-image:url(../icons/toolbox.png);left:553px;}
ul.menu li span.telephone{background-image:url(../icons/telephone.png);left:683px;}
ul.menu li span.print{background-image:url(../icons/print.png);left:813px;}

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