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 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" />
113 </li>
114 </ul>
115 </body>
116 </html>
时间： 2024-08-26 00:39:27