Jquery10_伸缩的导航条

最新推荐文章于 2018-11-01 11:20:30 发布

「已注销」

最新推荐文章于 2018-11-01 11:20:30 发布

阅读量669

点赞数

分类专栏： JQuery 文章标签： Jquery 导航条

本文链接：https://blog.csdn.net/wo_shi_chuan_qi_007/article/details/9281615

版权

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>伸缩的导航条</title>
    <style type="text/css">
        body
        {
        padding:0; margin:0;
        }

       #warpper
       {
          min-height:600px;
       }

       #navigation
       {
       position:absolute;
       top:0;left:0;
       margin:0; padding:0;
       width:120px; list-style:none;
       }

      #navigation li
      {
         position:relative;
         float:left;
         margin:0; padding:0;
         height:50px; width:120px;

      }

     #navigation li a
     {
     position:absolute;
     display:block;
     top:0;left:0;
     height:50px; width:120px;
     line-height:50px;
     text-align:center;
     color:#ffffff;
     }

     #navigation .nav0 a{background:#009900;}
     #navigation .nav1 a{background:#336666;}
     #navigation .nav2 a{background:#9933CC;}
     #navigation .nav3 a{background:#990000;}
     #navigation .nav4 a{background:#99FFFF;}
     #navigation .nav5 a{background:#CCCC33;}
     #navigation .nav6 a{background:#FF3399;}
     #navigation .nav7 a{background:#FF33FF;}
     #navigation .nav8 a{background:#0000CC;}
     #navigation .nav9 a{background:#336666;}
     #navigation .nav10 a{background:#9933CC;}
     #navigation .nav11 a{background:#990000;}
     #navigation .nav12 a{background:#FF3399;}
    </style>

// 默认其他项都在浏览器之外只保留第一项
$lists.children("a").animate({ "left": "-110px" }, 600);

            $lists.hover(function () {
                // 鼠标放上去时：
                $(this).children("a").animate({"left":"0px"},600);
            }, function () {
                // 鼠标离开时:
                $(this).children("a").animate({ "left":"-110px" }, 600);
            });

        });
    </script>
</head>
<body>
     <div id="warpper">
        <ul id="navigation">
           <li class="nav0 current_page"><a href="#">我的日志</a></li>
           <li class="nav1"><a href="#">我的下载</a></li>
           <li class="nav2"><a href="#">相册</a></li>
           <li class="nav3"><a href="#">资源</a></li>
           <li class="nav4"><a href="#">爱好</a></li>
           <li class="nav5"><a href="#">人文科学</a></li>
           <li class="nav6"><a href="#">历史</a></li>
           <li class="nav7"><a href="#">美图欣赏</a></li>
           <li class="nav8"><a href="#">旅游指南</a></li>
           <li class="nav9"><a href="#">物理学习</a></li>
           <li class="nav10"><a href="#">生物学系</a></li>
           <li class="nav11"><a href="#">化学反应</a></li>
           <li class="nav12"><a href="#">电子信息</a></li>
        </ul>
     </div>
</body>
</html>