极速小乌龟

导航

jQuery-二级导航 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title>列表中的导航菜单应用</title>
  5     <script type="text/javascript" 
  6             src="Jscript/jquery-1.8.2.min.js">
  7     </script>
  8     <style type="text/css">
  9            body{font-size:13px}
 10            ul,li{list-style-type:none;padding:0px;margin:0px}
 11            .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
 12            .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
 13            .content{padding-top:10px;clear:left}
 14            a{text-decoration:none;color:#666;padding:10px}
 15            .optnFocus{background-color:#fff;font-weight:bold}
 16            div{padding:10px}
 17            div img{float:left;padding-right:6px}
 18            span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
 19            .tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;
 20                 background-color:#fff;display:none}
 21            .tip li{line-height:23px;}
 22            #sort{position:absolute;display:none}
 23     </style> 
 24   <script type="text/javascript">
 25       $(function() {
 26           var curY; //获取所选项的Top值
 27           var curH; //获取所选项的Height值
 28           var curW; //获取所选项的Width值
 29           var srtY; //设置提示箭头的Top值
 30           var srtX; //设置提示箭头的Left值
 31           var objL; //获取当前对象
 32           /*
 33           *设置当前位置数值
 34           *参数obj为当前对象名称
 35           */
 36           function setInitValue(obj) {
 37               curY = obj.offset().top
 38               curH = obj.height();
 39               curW = obj.width();
 40               srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
 41               srtX = curW - 5 + "px"; //设置提示箭头的Left值
 42           }
 43           $(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件
 44               objL = $(this); //获取当前对象
 45               setInitValue(objL); //设置当前位置
 46               var allY = curY - curH + "px"; //设置提示框的Top值
 47               objL.addClass("optnFocus"); //增加获取焦点时的样式
 48               objL.next("ul").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标
 49               $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
 50           })
 51           .mouseout(function() {//设置当前所选项的鼠标移出事件
 52               $(this).removeClass("optnFocus"); //删除获取焦点时的样式
 53               $(this).next("ul").hide(); //隐藏提示框
 54               $("#sort").hide(); //隐藏提示箭头
 55           })
 56           $(".tip").mousemove(function() {
 57               $(this).show(); //显示提示框
 58               objL = $(this).prev("li"); //获取当前的上级li对象
 59               setInitValue(objL); //设置当前位置
 60               objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
 61               $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
 62           })
 63           .mouseout(function() {
 64               $(this).hide(); //隐藏提示框
 65               $(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式
 66               $("#sort").hide(); //隐藏提示箭头
 67           })
 68       })
 69        </script> 
 70 </head>
 71 <body>
 72      <ul>
 73         <li class="menu">
 74             <div>
 75                  <img alt="" src="Images/icon.gif" />
 76                  <span>电脑数码类产品</span>
 77             </div>
 78             <ul class="content">
 79                <li class="optn"><a href="#">笔记本</a></li>
 80                <ul class="tip">
 81                    <li><a href="#">笔记本1</a></li>
 82                    <li><a href="#">笔记本2</a></li>
 83                    <li><a href="#">笔记本3</a></li>
 84                    <li><a href="#">笔记本4</a></li>
 85                    <li><a href="#">笔记本5</a></li>
 86                </ul>
 87                <li class="optn"><a href="#">移动硬盘</a></li>
 88                <ul class="tip">
 89                    <li><a href="#">移动硬盘1</a></li>
 90                    <li><a href="#">移动硬盘2</a></li>
 91                    <li><a href="#">移动硬盘3</a></li>
 92                    <li><a href="#">移动硬盘4</a></li>
 93                    <li><a href="#">移动硬盘5</a></li>
 94                </ul>
 95                <li class="optn"><a href="#">电脑软件</a></li>
 96                <ul class="tip">
 97                    <li><a href="#">电脑软件1</a></li>
 98                    <li><a href="#">电脑软件2</a></li>
 99                    <li><a href="#">电脑软件3</a></li>
100                    <li><a href="#">电脑软件4</a></li>
101                    <li><a href="#">电脑软件5</a></li>
102                </ul>
103                <li class="optn"><a href="#">数码产品</a></li>
104                <ul class="tip">
105                    <li><a href="#">数码产品1</a></li>
106                    <li><a href="#">数码产品2</a></li>
107                    <li><a href="#">数码产品3</a></li>
108                    <li><a href="#">数码产品4</a></li>
109                    <li><a href="#">数码产品5</a></li>
110                </ul>
111             </ul>
112             <img id="sort" src="Images/sort.gif" alt=""/>
113         </li>
114      </ul>
115 </body>
116 </html>

 

posted on 2017-03-21 22:36  极速小乌龟  阅读(410)  评论(0)    收藏  举报