三级折叠菜单
- 发表于
- 前端
|
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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>三级折叠菜单</title> <style> body,dl,ul,dt,dd,h2{ margin:0; padding:0;} body{font:12px "宋体"; padding-top:20px;} #menu { width:200px; margin:0 auto;} #menu dt {font-weight:700; font-size:12px; border:#C60 1px solid; margin-top:1px; background-color:#F93;} #menu dd {display:none;} #menu dd h2 {display:block; font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F4F4F4;} #menu dd ul { display:none;height:100px; padding-left:15px; border:#E7E7E7 1px solid; border-top:none; overflow:auto;} #menu a {color:#777; border:none; text-decoration:none;display:block; padding:5px 0 3px 10px; ; overflow:hidden;} #menu dt a { color:#FFF; } #menu dt.off a{color:#6F0;} #menu h2.off a{color:#00F;} #menu a:hover{ color:#6F0; background-color:#333;} </style> </head> <body> <dl id="menu"> <dt><a href="javascript:void(0)">+ 一级菜单A</a></dt> <dd> <h2><a href="javascript:void(0)">+ 一级菜单A_1</a></h2> <ul> <a href="javascript:void(0)">一级菜单A_0</a> <a href="javascript:void(0)">一级菜单A_1</a> <a href="javascript:void(0)">一级菜单A_2</a> <a href="javascript:void(0)">一级菜单A_3</a> <a href="javascript:void(0)">一级菜单A_4</a> <a href="javascript:void(0)">一级菜单A_5</a> <a href="javascript:void(0)">一级菜单A_6</a> <a href="javascript:void(0)">一级菜单A_7</a> <a href="javascript:void(0)">一级菜单A_8</a> <a href="javascript:void(0)">一级菜单A_9</a> </ul> <h2><a href="javascript:void(0)">+ 一级菜单A_2</a></h2> <ul> <a href="javascript:void(0)">一级菜单A_0</a> <a href="javascript:void(0)">一级菜单A_1</a> <a href="javascript:void(0)">一级菜单A_2</a> <a href="javascript:void(0)">一级菜单A_3</a> <a href="javascript:void(0)">一级菜单A_4</a> <a href="javascript:void(0)">一级菜单A_5</a> <a href="javascript:void(0)">一级菜单A_6</a> <a href="javascript:void(0)">一级菜单A_7</a> <a href="javascript:void(0)">一级菜单A_8</a> <a href="javascript:void(0)">一级菜单A_9</a> </ul> <h2><a href="javascript:void(0)">+ 一级菜单A_3</a></h2> <ul> <a href="javascript:void(0)">一级菜单A_0</a> <a href="javascript:void(0)">一级菜单A_1</a> <a href="javascript:void(0)">一级菜单A_2</a> <a href="javascript:void(0)">一级菜单A_3</a> <a href="javascript:void(0)">一级菜单A_4</a> <a href="javascript:void(0)">一级菜单A_5</a> <a href="javascript:void(0)">一级菜单A_6</a> <a href="javascript:void(0)">一级菜单A_7</a> <a href="javascript:void(0)">一级菜单A_8</a> <a href="javascript:void(0)">一级菜单A_9</a> </ul> <h2><a href="javascript:void(0)">+ 一级菜单A_4</a></h2> <ul> <a href="javascript:void(0)">一级菜单A_0</a> <a href="javascript:void(0)">一级菜单A_1</a> <a href="javascript:void(0)">一级菜单A_2</a> <a href="javascript:void(0)">一级菜单A_3</a> <a href="javascript:void(0)">一级菜单A_4</a> <a href="javascript:void(0)">一级菜单A_5</a> <a href="javascript:void(0)">一级菜单A_6</a> <a href="javascript:void(0)">一级菜单A_7</a> <a href="javascript:void(0)">一级菜单A_8</a> <a href="javascript:void(0)">一级菜单A_9</a> </ul> </dd> <dt><a href="javascript:void(0)">+ 二级菜单B</a></dt> <dd> <h2><a href="javascript:void(0)">+ 二级菜单B_1</a></h2> <ul> <a href="javascript:void(0)">二级菜单B_0</a> <a href="javascript:void(0)">二级菜单B_1</a> <a href="javascript:void(0)">二级菜单B_2</a> <a href="javascript:void(0)">二级菜单B_3</a> <a href="javascript:void(0)">二级菜单B_4</a> <a href="javascript:void(0)">二级菜单B_5</a> <a href="javascript:void(0)">二级菜单B_6</a> <a href="javascript:void(0)">二级菜单B_7</a> <a href="javascript:void(0)">二级菜单B_8</a> <a href="javascript:void(0)">二级菜单B_9</a> </ul> <h2><a href="javascript:void(0)">+ 二级菜单B_2</a></h2> <ul> <a href="javascript:void(0)">二级菜单B_0</a> <a href="javascript:void(0)">二级菜单B_1</a> <a href="javascript:void(0)">二级菜单B_2</a> <a href="javascript:void(0)">二级菜单B_3</a> <a href="javascript:void(0)">二级菜单B_4</a> <a href="javascript:void(0)">二级菜单B_5</a> <a href="javascript:void(0)">二级菜单B_6</a> <a href="javascript:void(0)">二级菜单B_7</a> <a href="javascript:void(0)">二级菜单B_8</a> <a href="javascript:void(0)">二级菜单B_9</a> </ul> </dd> <dt><a href="javascript:void(0)">+ 三级菜单C</a></dt> <dd> <h2><a href="javascript:void(0)">+ 三级菜单C_1</a></h2> <ul> <a href="javascript:void(0)">三级菜单C_0</a> <a href="javascript:void(0)">三级菜单C_1</a> <a href="javascript:void(0)">三级菜单C_2</a> <a href="javascript:void(0)">三级菜单C_3</a> <a href="javascript:void(0)">三级菜单C_4</a> <a href="javascript:void(0)">三级菜单C_5</a> <a href="javascript:void(0)">三级菜单C_6</a> <a href="javascript:void(0)">三级菜单C_7</a> <a href="javascript:void(0)">三级菜单C_8</a> <a href="javascript:void(0)">三级菜单C_9</a> </ul> <h2><a href="javascript:void(0)">+ 三级菜单C_2</a></h2> <ul> <a href="javascript:void(0)">三级菜单C_0</a> <a href="javascript:void(0)">三级菜单C_1</a> <a href="javascript:void(0)">三级菜单C_2</a> <a href="javascript:void(0)">三级菜单C_3</a> <a href="javascript:void(0)">三级菜单C_4</a> <a href="javascript:void(0)">三级菜单C_5</a> <a href="javascript:void(0)">三级菜单C_6</a> <a href="javascript:void(0)">三级菜单C_7</a> <a href="javascript:void(0)">三级菜单C_8</a> <a href="javascript:void(0)">三级菜单C_9</a> </ul> </dd> <dt><a href="javascript:void(0)">+ 四级菜单D</a></dt> <dd> <h2><a href="javascript:void(0)">+ 四级菜单D_1</a></h2> <ul> <a href="javascript:void(0)">四级菜单D_0</a> <a href="javascript:void(0)">四级菜单D_1</a> <a href="javascript:void(0)">四级菜单D_2</a> <a href="javascript:void(0)">四级菜单D_3</a> <a href="javascript:void(0)">四级菜单D_4</a> <a href="javascript:void(0)">四级菜单D_5</a> <a href="javascript:void(0)">四级菜单D_6</a> <a href="javascript:void(0)">四级菜单D_7</a> <a href="javascript:void(0)">四级菜单D_8</a> <a href="javascript:void(0)">四级菜单D_9</a> </ul> <h2><a href="javascript:void(0)">+ 四级菜单D_2</a></h2> <ul> <a href="javascript:void(0)">四级菜单D_0</a> <a href="javascript:void(0)">四级菜单D_1</a> <a href="javascript:void(0)">四级菜单D_2</a> <a href="javascript:void(0)">四级菜单D_3</a> <a href="javascript:void(0)">四级菜单D_4</a> <a href="javascript:void(0)">四级菜单D_5</a> <a href="javascript:void(0)">四级菜单D_6</a> <a href="javascript:void(0)">四级菜单D_7</a> <a href="javascript:void(0)">四级菜单D_8</a> <a href="javascript:void(0)">四级菜单D_9</a> </ul> </dd> </dl> <script language="JavaScript"> <!--// function $Id(Id){return document.getElementById(Id);} function $Tag(id,Tag){return id.getElementsByTagName(Tag);} function ShowMenu(e){ var $dt = $Tag($Id(e),"dt"); var $dd = $Tag($Id(e),"dd"); $dd[0].style.display = "block"; for(var t=0;t<$dt.length;t++){ $dt[t].value=t; $dt[t].onclick = function(){return ShowClose(this,this.value);} var $h2 = $Tag($dd[t],"h2"); for(var h=0;h<$h2.length;h++){ $h2[h].value=h; $h2[h].onclick = function(){return ShowClose(this,this.value);} } } function ShowClose(obj,n){ var dt = $Tag(obj.parentNode,obj.tagName); var dd = $Tag(obj.parentNode,[obj.parentNode.tagName!="DL"?"ul":"dd"]); if(dd.length==0 || !dd[n]){return false;} if(dd[n].style.display == "block"){ obj.className = ""; obj.innerHTML = obj.innerHTML.replace("-","+"); dd[n].style.display = "none"; return false; } for(var i=0;i<dt.length;i++){ dt[i].innerHTML=[i!=n?dt[i].innerHTML.replace("-","+"):dt[i].innerHTML.replace("+","-")]; dt[i].className=[i!=n?"":"off"]; } for(var i=0;i<dd.length;i++){dd[i].style.display=[i!=n?"none":"block"];} } } new ShowMenu( "menu"); //--> </script> </body> </html> |
