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 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>常用后台菜单</title>
6 <style type="text/css">
7 body {font-size: 12px;}
8 *{margin:0;padding:0;}
9 #left {width: 160px; background: #fff; border:solid 1px #ccc;color: #f06;}
10 #shut {;top: 2px;left:144px;}
11 #nav div{cursor: pointer; background:#f7f7f7;border-bottom: dashed 1px #ccc; padding:5px 5px 5px 10px; display:block}
12 #nav ul{list-style: inside circle; display: none;font: 12px/130% Tahoma; margin-left:2em;}
13 #nav li{padding:2px; margin-bottom:3px; border-bottom:solid 1px #eee;}
14 #nav li a{ color:#f20; text-decoration:none;}
15 </style>
16 </head>
17 <body>
18 <img src="" width="10" height="10" title="关闭菜单导航" />
19 <div >
20 <div >
21 <div>系统信息公告
22 <ul>
23 <li><a href="">公告列表</a></li>
24 <li><a href="">发布留言</a></li>
25 <li><a href="">查看留言</a></li>
26 </ul>
27 </div>
28
29 <div>用户管理
30 <ul>
31 <li><a href="">添加用户</a></li>
32 <li><a href="">更改密码</a></li>
33 <li><a href="">更改用户信息</li>
34 </ul>
35 </div>
36
37 </div>
38 </div>
39 <script type="text/javascript">
40 var left = document.getElementById("left");
41 var shut = document.getElementById("shut");
42 function shut_open() {
43 left.style.display = (left.style.display == "none")?"":"none";
44 shut.style.left = (shut.style.left == "2px")?"144px":"2px";
45 shut.src = (shut.src == "img/open.gif")?"img/shut.gif":"img/open.gif";
46 shut.title = (shut.title == "打开菜单导航")?"关闭菜单导航":"打开菜单导航";
47 }
48 shut.onclick = shut_open;
49 var cao=document.getElementById("nav");
50 var ddii = cao.childNodes;
51 ul=new Array;
52 di=new Array;
53 for(var i=0;i<ddii.length;i++){
54 ddii[i].cao=i;
55 cao.childNodes[i].childNodes[1].onclick=function nono(){window.event.cancelBubble = true;}
56 ddii[i].onclick=function shut_open1(){var i=this.cao;cao.childNodes[i].childNodes[1].style.display = (cao.childNodes[i].childNodes[1].style.display == "block")?"":"block";}
57 }
58 </script>
59 </body>
60 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>常用后台菜单</title>
6 <style type="text/css">
7 body {font-size: 12px;}
8 *{margin:0;padding:0;}
9 #left {width: 160px; background: #fff; border:solid 1px #ccc;color: #f06;}
10 #shut {;top: 2px;left:144px;}
11 #nav div{cursor: pointer; background:#f7f7f7;border-bottom: dashed 1px #ccc; padding:5px 5px 5px 10px; display:block}
12 #nav ul{list-style: inside circle; display: none;font: 12px/130% Tahoma; margin-left:2em;}
13 #nav li{padding:2px; margin-bottom:3px; border-bottom:solid 1px #eee;}
14 #nav li a{ color:#f20; text-decoration:none;}
15 </style>
16 </head>
17 <body>
18 <img src="" width="10" height="10" title="关闭菜单导航" />
19 <div >
20 <div >
21 <div>系统信息公告
22 <ul>
23 <li><a href="">公告列表</a></li>
24 <li><a href="">发布留言</a></li>
25 <li><a href="">查看留言</a></li>
26 </ul>
27 </div>
28
29 <div>用户管理
30 <ul>
31 <li><a href="">添加用户</a></li>
32 <li><a href="">更改密码</a></li>
33 <li><a href="">更改用户信息</li>
34 </ul>
35 </div>
36
37 </div>
38 </div>
39 <script type="text/javascript">
40 var left = document.getElementById("left");
41 var shut = document.getElementById("shut");
42 function shut_open() {
43 left.style.display = (left.style.display == "none")?"":"none";
44 shut.style.left = (shut.style.left == "2px")?"144px":"2px";
45 shut.src = (shut.src == "img/open.gif")?"img/shut.gif":"img/open.gif";
46 shut.title = (shut.title == "打开菜单导航")?"关闭菜单导航":"打开菜单导航";
47 }
48 shut.onclick = shut_open;
49 var cao=document.getElementById("nav");
50 var ddii = cao.childNodes;
51 ul=new Array;
52 di=new Array;
53 for(var i=0;i<ddii.length;i++){
54 ddii[i].cao=i;
55 cao.childNodes[i].childNodes[1].onclick=function nono(){window.event.cancelBubble = true;}
56 ddii[i].onclick=function shut_open1(){var i=this.cao;cao.childNodes[i].childNodes[1].style.display = (cao.childNodes[i].childNodes[1].style.display == "block")?"":"block";}
57 }
58 </script>
59 </body>
60 </html>
