列表中的导航菜单的制作

来源：互联网发布：node supervisor 编辑：程序博客网时间：2024/06/07 05:01
效果图如下
代码如下：（图片大家可以自己找）
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<htmlxmlns="http://www.w3.org/1999/xhtml">
 
    <head>
 
        <title>事件中的冒泡现象</title>
 
        <metahttp-equiv="Content"  "content=text/html; charset=utf-8" />
        <scripttype="text/javascript"
 
        src="jquery-1.5.0-vsdoc.js"></script>
 
        <scripttype="text/javascript"
 
        src="jquery-1.4.2.js"></script>
 
        <styletype="text/css">
            body {
                font-size:13px
            }
            ul, li {
                list-style-type:none;
                padding:0px;
                margin:0px
            }
            .menu {
                width:190px;
                border:solid 1px #E5D1A1;
                background-color:#FFFDD2
            }
            .optn {
                width:190px;
                line-height:28px;
                border-top:dashed 1px #ccc
            }
            .content {
                padding-top:10px;
                clear:left
            }
            a {
                text-decoration:none;
                color:#666;
                padding:10px
            }
            .optnFocus {
                background-color:#fff;
                font-weight:bold
            }
            div {
                padding:10px
            }
            div img {
                float:left;
                padding-right:6px
            }
            span {
                padding-top:3px;
                font-size:14px;
                font-weight:bold;
                float:left
            }
            .tip {
                width:190px;
                border:solid 2px #ffa200;
                position:absolute;
                padding:10px;
                background-color:#fff;
                display:none
            }
            .tip li {
                line-height:23px;
            }
            #sort {
                position:absolute;
                display:none
            }
        </style>
 
        <scripttype="text/javascript">
            $( function() {
                var curY; //获取所选项的Top值
 
                var curH; //获取所选项的Height值
 
                var curW; //获取所选项的Width值
 
                var srtY; //设置提示箭头的Top值
 
                var srtX; //设置提示箭头的Left值
 
                var objL; //获取当前对象
 
                /**
                 * 设置当前位置数值
                 * 参数obj为当前对象名称
                 * */
                function setInitValue(obj) {
 
                    curY = obj.offset().top
 
                    curH = obj.height();
 
                    curW = obj.width();
 
                    srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
 
                    srtX = curW - 5 + "px"; //设置提示箭头的Left值
 
                }
 
                $(".optn").mouseover( function() {//设置当前所选项的鼠标滑过事件
 
                    objL = $(this); //获取当前对象
 
                    setInitValue(objL); //设置当前位置
 
                    var allY = curY - curH + "px"; //设置提示框的Top值
 
                    objL.addClass("optnFocus"); //增加获取焦点时的样式
 
                    objL.next("ul").show().css({
                        "top": allY,
                        "left": curW
                    }) //显示并设置提示框的坐标
 
                    $("#sort").show().css({
                        "top": srtY,
                        "left": srtX
                    }); //显示并设置提示箭头的坐标
 
                })
                .mouseout( function() {//设置当前所选项的鼠标移出事件
 
                    $(this).removeClass("optnFocus"); //删除获取焦点时的样式
 
                    $(this).next("ul").hide(); //隐藏提示框
 
                    $("#sort").hide(); //隐藏提示箭头
 
                })
                $(".tip").mousemove( function() {
 
                    $(this).show(); //显示提示框
 
                    objL = $(this).prev("li"); //获取当前的上级li对象
 
                    setInitValue(objL); //设置当前位置
 
                    objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
 
                    $("#sort").show().css({
                        "top": srtY,
                        "left": srtX
                    }); //显示并设置提示箭头的坐标
 
                })
                .mouseout( function() {
 
                    $(this).hide(); //隐藏提示框
 
                    $(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式
 
                    $("#sort").hide(); //隐藏提示箭头
 
                })
            })
        </script>
    </head>
    <body>
        <ul>
 
            <liclass="menu">
 
                <div>
 
                    <imgalt="" src="icon.gif" />
 
                    <span>电脑数码类产品</span>
 
                </div>
 
                <ulclass="content">
 
                    <liclass="optn">
                        <ahref="#">笔记本</a>
                    </li>
 
                    <ulclass="tip">
 
                        <li>
                            <ahref="#">笔记本1</a>
                        </li>
 
                        <li>
                            <ahref="#">笔记本2</a>
                        </li>
 
                        <li>
                            <ahref="#">笔记本3</a>
                        </li>
 
                        <li>
                            <ahref="#">笔记本4</a>
                        </li>
 
                        <li>
                            <ahref="#">笔记本5</a>
                        </li>
 
                    </ul>
 
                    <liclass="optn">
                        <ahref="#">移动硬盘</a>
                    </li>
 
                    <ulclass="tip">
 
                        <li>
                            <ahref="#">移动硬盘1</a>
                        </li>
 
                        <li>
                            <ahref="#">移动硬盘2</a>
                        </li>
 
                        <li>
                            <ahref="#">移动硬盘3</a>
                        </li>
 
                        <li>
                            <ahref="#">移动硬盘4</a>
                        </li>
 
                        <li>
                            <ahref="#">移动硬盘5</a>
                        </li>
 
                    </ul>
 
                    <liclass="optn">
                        <ahref="#">电脑软件</a>
                    </li>
 
                    <ulclass="tip">
 
                        <li>
                            <ahref="#">电脑软件1</a>
                        </li>
 
                        <li>
                            <ahref="#">电脑软件2</a>
                        </li>
 
                        <li>
                            <ahref="#">电脑软件3</a>
                        </li>
 
                        <li>
                            <ahref="#">电脑软件4</a>
                        </li>
 
                        <li>
                            <ahref="#">电脑软件5</a>
                        </li>
 
                    </ul>
 
                    <liclass="optn">
                        <ahref="#">数码产品</a>
                    </li>
 
                    <ulclass="tip">
 
                        <li>
                            <ahref="#">数码产品1</a>
                        </li>
 
                        <li>
                            <ahref="#">数码产品2</a>
                        </li>
 
                        <li>
                            <ahref="#">数码产品3</a>
                        </li>
 
                        <li>
                            <ahref="#">数码产品4</a>
                        </li>
 
                        <li>
                            <ahref="#">数码产品5</a>
                        </li>
 
                    </ul>
 
                </ul>
 
                <imgid="sort" src="sort.gif" alt=""/>
 
            </li>
 
        </ul>
 
    </body>
 
</html>
==============================================================================
我喜欢程序员，他们单纯、固执、容易体会到成就感；面对压力，能够挑灯夜战不眠不休；面对困难，能够迎难而上挑战自我。他
们也会感到困惑与傍徨，但每个程序员的心中都有一个比尔盖茨或是乔布斯的梦想“用智慧开创属于自己的事业”。我想说的是，其
实我是一个程序员
==============================================================================
0 0