快捷導(dǎo)航

實(shí)用的多級(jí)樹(shù)形展開(kāi)菜單效果代碼

更新時(shí)間：2010年10月31日 21:31:17 作者：

實(shí)用的多級(jí)樹(shù)形展開(kāi)菜單，相信它支持的級(jí)別會(huì)讓您滿意，開(kāi)始我還以為它是無(wú)限級(jí)的呢？希望這個(gè)菜單對(duì)大家有幫助哦。

<!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> <title>實(shí)用的多級(jí)樹(shù)形展開(kāi)菜單</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} ul,li,{margin:0;padding:0;} ul{list-style:none;} #root{margin:10px;width:200px;overflow:hidden;} #root li{line-height:25px;} #root .rem{padding-left:16px;} #root .add{background:url(/upload/201010/20101031213041133.gif) -4px -31px no-repeat;} #root .ren{background:url(/upload/201010/20101031213041133.gif) -4px -7px no-repeat;} #root li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());} #root li input{vertical-align:middle;margin-left:5px;} #root .two{padding-left:20px;display:none;} </style> </head> <body> <ul id="root"> <li> <label><a href="javascript:;">校訊通</a></label> <ul class="two"> <li> <label><a href="javascript:;">沈陽(yáng)市</a></label> <ul class="two"> <li> <label><input type="checkbox" value="123456"><a href="javascript:;">二小</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;">二年級(jí)</a></label></li> <li> <label><input type="checkbox" value="123456"><a href="javascript:;">三年級(jí)</a></label> <ul class="two"> <li> <label><input type="checkbox" value="123456"><a href="javascript:;">一班</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;">張三</a></label></li> <li><label><input type="checkbox" value="123456"><a href="javascript:;">王五</a></label></li> </ul> </li> <li><label><input type="checkbox" value="123456"><a href="javascript:;">實(shí)驗(yàn)班</a></label></li> </ul> </li> </ul> </li> </ul> </li> <li> <label><a href="javascript:;">撫順市</a></label> <ul class="two"> <li><label><input type="checkbox" value="123456"><a href="javascript:;">二小</a></label></li> <li><label><input type="checkbox" value="123456"><a href="javascript:;">一中</a></label></li> </ul> </li> </ul> </li> </ul>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: