纵向菜单
html页面代码：
View Code
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 <link rel="Stylesheet" href="Styles/menu.css" type="text/css" />
5 <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
6 <script type="text/javascript" src="Scripts/menu.js"></script>
7 <title></title>
8 </head>
9 <body>
10 <ul>
11 <li class="mainmenu"><a href="#">主菜单1</a>
12 <ul>
13 <li><a href="#">子菜单1</a></li>
14 <li><a href="#">子菜单2</a></li>
15 </ul>
16 </li>
17 <li class="mainmenu"><a href="#">主菜单2</a>
18 <ul>
19 <li><a href="#">子菜单1</a></li>
20 <li><a href="#">子菜单2</a></li>
21 </ul>
22 </li>
23 <li class="mainmenu"><a href="#">主菜单3</a>
24 <ul>
25 <li><a href="#">子菜单1</a></li>
26 <li><a href="#">子菜单2</a></li>
27 </ul>
28 </li>
29 </ul>
30 </body>
31 </html>
menu.css文件：
View Code
1 ul, li
2 {
3 list-style: none;
4 width: 100px;
5 }
6 ul
7 {
8 margin: 0px;
9 padding: 0px;
10 }
11 .mainmenu
12 {
13 background-image: url(../images/title.gif);
14 background-repeat: repeat-x;
15 }
16 li
17 {
18 background-color: #EEEEEE;
19 }
20 a
21 {
22 text-decoration: none;
23 padding-left: 10px;
24 display: block;
25 padding-bottom: 3px;
26 padding-top: 3px;
27 }
28 .mainmenu a
29 {
30 color: White;
31 background-image: url(../images/collapsed.gif);
32 background-repeat: no-repeat;
33 background-position: 3px center;
34 }
35 .mainmenu li a
36 {
37 color: black;
38 background-image: none;
39 }
40 .mainmenu ul
41 {
42 display: none;
43 }
menu.js代码：
View Code
1 $(document).ready(function () {
2 $(".mainmenu >a").click(function () {
3 var urlnode = $(this).next("ul");
4 //方法一：
5 /*
6 if (urlnode.css("display") == "none") {
7 urlnode.css("display", "block");
8 } else {
9 urlnode.css("display", "none");
10 }
11 */
12 //方法二：
13 //urlnode.show(500); //或者slow ,normal fast
14 // urlnode.hide();
15 //方法三：
16 //urlnode.toggle(500); //或者slow ,normal fast
17 // 方法四：
18 //urlnode.slideDown();
19 //urlnode.slideUp();
20 //方法五：
21 urlnode.slideToggle();
22 changeIcon($(this));
23
24 });
25
26 });
27 //展开菜单 换图标
28 function changeIcon(mainNode) {
29 if (mainNode) {
30 if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
31 mainNode.css("background-image", "url('images/expanded.gif')");
32 } else {
33 mainNode.css("background-image", "url('images/collapsed.gif')");
34 }
35 }
36 }
效果图：
