几个不错的自动收缩菜单导航效果

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>runcode</title> <meta name="author" content="sheneyan"> <style type="text/css"> div.xx{border:solid 1px;overflow:hidden;} div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;} </style> <div class="xx"> <h5 onclick="toggle(this.parentnode)">伸缩效果</h5> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div class="xx"> <h5 onclick="toggle(this.parentnode)">伸缩效果</h5> <p>sdf容</p> <p>sdf容</p> <p>sf容</p> <p>sfd容</p> </div>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

一打开网页是收缩的

<title>runcode</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="author" content="sheneyan"> <style type="text/css"> div.xx{border:solid 1px;overflow:hidden;height:200px} div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;} </style> <div class="xx"> <h5 onclick="toggle(this.parentnode);">伸缩效果</h5> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div class="xx"> <h5 onclick="toggle(this.parentnode)">伸缩效果</h5> <p>sdf容</p> <p>sdf容</p> <p>sf容</p> <p>sfd容</p> </div>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

慢慢展开菜单的效果，以前早就有人做过，给个时间函数。也算不上什么极限：

<meta http-equiv="content-type" content="text/html; charset=gb2312"> <style> body{ margin:0px; font:normal 12px 宋体; background: #999999; } table{border:0px;} td{font:normal 12px 宋体; } img{vertical-align:middle; border:0px;} .sec_menu{border-left:1px solid #808080; border-right:1px solid #808080; border-bottom:1px solid #808080; overflow:hidden; background:#ffcc99;} .menu_title{background-color: #cc6600} .menu_title span{color:#ffffff;} .menu_title2{background-color: #ff9900} .menu_title2 span{color:#c8c8c8; } .showtitle{position:relative; top:-2px; left:-6px; border:1pt solid #c3d4e7; z-index:0; height:26; background-color: #0080c0; padding-top:5; padding-left:5} .alp{filter: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5, finishx=250,finishy=85} .txt1{font-size:9pt; color:#cccccc;} </style> <title>cattom</title> <link href="link.css" rel="stylesheet" type="text/css"> <div id="layer1" style="position:absolute; left:0px; top:350px; width:111px; height:102px; z-index:1"> <table cellpadding="0" cellspacing="0" width="150" style="border-top:1pt solid black"> <tr style="cursor:hand;"><td height="18" class="menu_title" onmouseover="this.classname='menu_title2'" onmouseout="this.classname='menu_title'" id="menutitle1" onclick="menuchange (menu1,120,menutitle1,arrow1);"> <span><span id="arrow1"><font face="webdings">4</font></span> ::动漫同人志::</span> </td></tr> <tr><td><div class="sec_menu" style="width:150;height:0; filter:alpha(opacity=0);display:none;" id="menu1"> <table cellpadding="0" cellspacing="0" align="center" width="135" style="position:relative;top:10px;"> <tr> <td height="20"></td> </tr> <tr> <td height="20"></td> </tr> <tr> <td height="20"></td> </tr> <tr> <td height="20"></td> </tr> <tr> <td height="20"></td> </tr> </table> </div></td></tr> </table> <table cellpadding="0" cellspacing="0" width="150" style="border-top:1pt solid black"> <tr style="cursor:hand;"><td height="18" class="menu_title" onmouseover="this.classname='menu_title2'" onmouseout="this.classname='menu_title'" id="menutitle2" onclick="menuchange (menu2,120,menutitle2,arrow2);"> <span><span id="arrow2"><font face="webdings">4</font></span> ::动漫音乐::</span> </td></tr> <tr><td><div class="sec_menu" style="width:150;height:0; filter:alpha(opacity=0);display:none;" id="menu2"> <table cellpadding="0" cellspacing="0" align="center" width="135" style="position:relative;top:10px;"> <tr> <td height="20"></td> </tr> <tr> <td height="20"></td> </tr> <tr> <td height="20"></td> </tr> <tr> <td height="20"></td> </tr> <tr> <td height="20"></td> </tr> </table> </div></td></tr> </table> <table cellpadding="0" cellspacing="0" width="150" style="border-top:1pt solid black; border-bottom:1pt solid black;"> <tr style="cursor:hand;"><td height="18" class="menu_title" onmouseover="this.classname='menu_title2'" onmouseout="this.classname='menu_title'" id="menutitle3" onclick="menuchange(menu3,140,menutitle3,arrow3);"> <span><span id="arrow3"><font face="webdings">4</font></span> ::网页123::</span> </td></tr> <tr><td> <div class="sec_menu" style="width:150;height:0; filter:alpha(opacity=0); display:none;" id="menu3"> <table cellpadding="0" cellspacing="0" align="center" width="135" style="position:relative; top:10px;"> <tr><td height="20">::网页基础::</td></tr> <tr><td height="20">::网页进阶::</td></tr> <tr><td height="20">::网页高手::</td></tr> <tr><td height="20">::网页脚本::</td></tr> <tr><td height="20">::网页理念::</td></tr> <tr><td height="20">::网页源件::</td></tr> </table> </div> </td></tr> </table> <table cellpadding="0" cellspacing="0" width="150" style="border-top:1pt solid black; border-bottom:1pt solid black;"> <tr style="cursor:hand;"><td height="18" class="menu_title" onmouseover="this.classname='menu_title2'" onmouseout="this.classname='menu_title'" id="menutitle4" onclick="menuchange(menu4,140,menutitle4,arrow4);"> <span><span id="arrow4"><font face="webdings">4</font></span> ::兄弟站点::</span> </td></tr> <tr><td> <div class="sec_menu" style="width:150;height:0; filter:alpha(opacity=0); display:none;" id="menu4"> <table cellpadding="0" cellspacing="0" align="center" width="135" style="position:relative; top:10px;"> <tr><td height="20">征集中...</td></tr> <tr><td height="20">征集中...</td></tr> <tr><td height="20">征集中...</td></tr> <tr><td height="20">征集中...</td></tr> <tr><td height="20">征集中...</td></tr> <tr><td height="20">征集中...</td></tr> </table> </div> </td></tr> </table> </div>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

<title>tree menu by jiarry</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> span{ width:100px;height:25px;margin-left:15px;} font{font-weight:bold;} body,td{font-family:verdana, arial, helvetica, sans-serif; font-size:12px;color:#333333;} div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray ;background-color:#d3f7fe ;width:120px;} pre{background-color:#fffff1; border:1px solid gray;color:blue;font-family:verdana;arial;padding:20px;} </style> <p> </p> <p> </p> <div style="line-height:25px;" onclick="showhide_obj(title1,icon1)"> <font id="icon1">+</font>栏目一</div> <div id="title1" style="background-color:#fffff3;line-height:22px;display:none;"> <span id="menu1_1" onmouseover="this.style.backgroundcolor='blue'" onmouseout="this.style.backgroundcolor=''" onclick="show_this(select1_1)"><font id="select1_1"></font>菜单一</span> <span id="menu1_2" onclick="show_this(select1_2)"><font id="select1_2"></font>菜单二</span> <span id="menu1_3" onclick="show_this(select1_3)"><font id="select1_3"></font>菜单三</span> </div> <div style="line-height:25px;" onclick="showhide_obj(title2,icon2)"> <font id="icon2">+</font>栏目二</div> <div id="title2" style="background-color:#fffff3;line-height:22px;display:none;"> <span id="menu2_1" onclick="show_this(select2_1)"><font id="select2_1"></font>菜单一</span> <span id="menu2_2" onclick="show_this(select2_2)"><font id="select2_2"></font>菜单二</span> <span id="menu2_3" onclick="show_this(select2_3)"><font id="select2_3"></font>菜单三</span> </div> <div style="line-height:25px;" onclick="showhide_obj(title3,icon3)"> <font id="icon3">+</font>栏目三</div> <div id="title3" style="background-color:#fffff3;line-height:22px;display:none;"> <span id="menu3_1" onclick="show_this(select3_1)"><font id="select3_1"></font>菜单一</span> <span id="menu3_2" onclick="show_this(select3_2)"><font id="select3_2"></font>菜单二</span> <span id="menu3_3" onclick="show_this(select3_3)"><font id="select3_3"></font>菜单三</span> </div> <div style="line-height:25px;" onclick="showhide_obj(title4,icon4)"> <font id="icon4">+</font>栏目四</div> <div id="title4" style="background-color:#fffff3;line-height:22px;display:none;"> <span id="menu4_1" onclick="show_this(select4_1)"><font id="select4_1"></font>菜单一</span> <span id="menu4_2" onclick="show_this(select4_2)"><font id="select4_2"></font>菜单二</span> <span id="menu4_3" onclick="show_this(select4_3)"><font id="select4_3"></font>菜单三</span> <span id="menu4_4" onclick="show_this(select4_4)"><font id="select4_4"></font>菜单三</span> <span id="menu4_5" onclick="show_this(select4_5)"><font id="select4_5"></font>菜单三</span> <span id="menu4_6" onclick="show_this(select4_6)"><font id="select4_6"></font>菜单三</span> </div> <div> <span style=" border-top:1px solid gray;width:120px;margin-left:0px;"></span> </div>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]