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{190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} 12 .optn{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{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>