很清爽的一个菜单

  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 
  4 
  5 <head>
  6     <style type="text/css">
  7         body {
  8             margin: 10px;
  9             padding: 10px;
 10         }
 11 
 12         body, h2, div, span, li {
 13             font-size: 12px;
 14         }
 15 
 16         .title01, .title02 {
 17             color: #fff;
 18             font-weight: bold;
 19         }
 20 
 21         #DoorP {
 22             border: 12px solid #eee;
 23             width: 150px;
 24             padding: 4px;
 25             background: #fff;
 26         }
 27 
 28         h2 {
 29             text-align: center;
 30             margin: 0px;
 31             padding: 0px;
 32             line-height: 22px;
 33         }
 34 
 35         .title01 {
 36             width: 100%;
 37             height: 25px;
 38             background: #99cc00;
 39             cursor: pointer;
 40         }
 41 
 42         .title02 {
 43             width: 100%;
 44             height: 25px;
 45             background: #006600;
 46             cursor: pointer;
 47         }
 48 
 49         .content {
 50             background: #eee;
 51             border-bottom: 2px solid #fff;
 52             overflow: hidden;
 53             color: #666;
 54             padding-left: 4px;
 55             padding-right: 4px;
 56             line-height: 18px;
 57             font-family: "宋体";
 58             width: 100%;
 59             height: 1px;
 60             display: block;
 61         }
 62 
 63             .content a:link, .content a:visited {
 64                 color: #666666;
 65                 text-decoration: none;
 66             }
 67 
 68             .content a:hover {
 69                 color: #FF6600;
 70                 text-decoration: underline;
 71             }
 72     </style>
 73 </head>
 74 <body>
 75     <div id="DoorP">
 76         <h2>懒人建站</h2>
 77         <div class="content"><a href="http://www.51xuediannao.com/js/nav/">·导航菜单</a></div>
 78         <h2>HTML+CSS模板</h2>
 79         <div class="content"><a href="http://www.51xuediannao.com/HTML+CSS/">·HTML+CSS模板</a></div>
 80         <h2>焦点幻灯</h2>
 81         <div class="content"><a href="http://51xuediannao.com/JS/Slide/">·焦点幻灯_懒人建站</a></div>
 82         <h2>CSS技巧</h2>
 83         <div class="content"><a href="http://51xuediannao.com/jiqiao/css/">·懒人建站提供CSS技巧</a></div>
 84         <h2>CSS建站技巧</h2>
 85         <div class="content"><a href="http://51xuediannao.com/jiqiao/cms/">·CSS建站技巧</a></div>
 86         <h2>JS广告代码</h2>
 87         <div class="content"><a href="http://51xuediannao.com/JS/AD/">·JS广告代码</a></div>
 88     </div>
 89     <script type="text/javascript">
 90         var onum = 0;
 91         var closeState = new Array();
 92         var ch = 200;
 93         function $(id) { if (document.getElementById(id)) { return document.getElementById(id); } else { alert("没有找到!") } }
 94         function $tag(id, tagName) { return $(id).getElementsByTagName(tagName) }
 95         var Ds = $tag("DoorP", "div");
 96         var Ts = $tag("DoorP", "h2");
 97         if (Ds.length != Ts.length) { alert("初始化失败!"); }
 98         function showMe(Cid, Oid) { var h = parseInt(Ds[Cid].style.height); var h2 = parseInt(Ds[Oid].style.height); var dH = ch; if (h > 0) { h = h - Math.ceil(h / 3); Ds[Cid].style.height = h + "px"; }; if (h2 < dH) { h2 = h2 + Math.ceil((dH - h2) / 3); Ds[Oid].style.height = h2 + "px"; }; if (h <= 0 && h2 >= dH) { clearTimeout(closeState[Cid]); return false; }; closeState[Cid] = setTimeout("showMe(" + Cid + "," + Oid + ")"); }
 99         for (var i = 0; i < Ds.length; i++) {
100             if (i == onum) { Ds[i].style.height = ch + "px"; Ts[i].className = "title01"; } else { Ds[i].style.height = "0px"; Ts[i].className = "title02"; }
101             Ts[i].value = i;
102             Ts[i].onclick = function () {
103                 if (onum == this.value) { return false; };
104                 Ts[onum].className = "title02";
105                 Ts[this.value].className = "title01";
106                 for (var i = 0; i < closeState.length; i++) { clearTimeout(closeState[i]); }
107                 showMe(onum, this.value);
108                 onum = this.value;
109             }
110         }
111     </script>
112 </body>
113 </html>