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

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> <script type="text/javascript"> var mh = 30;//最小高度 var step = 1;//每次变化的px量 var ms = 10;//每隔多久循环一次 function toggle（o）{ if （！o.tid）o.tid = "_" + Math.random（） * 100; if （！window.toggler）window.toggler = {}; if （！window.toggler[o.tid]）{ window.toggler[o.tid]={ obj:o, maxHeight:o.offsetHeight, minHeight:mh, timer:null, action:1 }; } o.style.height = o.offsetHeight + "px"; if （window.toggler[o.tid].timer）clearTimeout（window.toggler[o.tid].timer）; window.toggler[o.tid].action *= -1; window.toggler[o.tid].timer = setTimeout（"anim（""+o.tid+""）",ms ）; } function anim（id）{ var t = window.toggler[id]; var o = window.toggler[id].obj; if （t.action < 0）{ if （o.offsetHeight <= t.minHeight）{ clearTimeout（t.timer）; return; } } else{ if （o.offsetHeight >= t.maxHeight）{ clearTimeout（t.timer）; return; } } o.style.height = （parseInt（o.style.height, 10） + t.action * step） + "px"; window.toggler[id].timer = setTimeout（"anim（""+id+""）",ms ）; } </script> <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> </head> <body> <h5 onclick="toggle（this.parentNode）">伸缩效果</h5> 内容<br/> 内容<br/> 内容<br/> 内容<br/><h5 onclick="toggle（this.parentNode）">伸缩效果</h5> sdf容<br/> sdf容<br/> sf容<br/> sfd容<br/></body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
一打开网页是收缩的

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> <script type="text/javascript"> var mh = 30;//最小高度 var step = 1;//每次变化的px量 var ms = 10;//每隔多久循环一次 var caiying2007=202//最大高度 window.onload=function init（）{ var obj_init=document.getElementsByTagName（"div"） for （var oi=0;oi<obj_init.length;oi++）{ if （obj_init[oi].className=="xx"）{obj_init[oi].style.height=mh + "px";} } } function toggle（o）{ if （！o.tid）o.tid = "_" + Math.random（） * 100; if （！window.toggler）window.toggler = {}; if （！window.toggler[o.tid]）{ window.toggler[o.tid]={ obj:o, //maxHeight:o.offsetHeight, maxHeight:caiying2007, minHeight:mh, timer:null, action:-1 }; } o.style.height = o.offsetHeight + "px"; if （window.toggler[o.tid].timer）clearTimeout（window.toggler[o.tid].timer）; window.toggler[o.tid].action *= -1; window.toggler[o.tid].timer = setTimeout（"anim（""+o.tid+""）",ms ）; } function anim（id）{ var t = window.toggler[id]; var o = window.toggler[id].obj; if （t.action < 0）{ if （o.offsetHeight <= t.minHeight）{ clearTimeout（t.timer）; return; } } else{ if （o.offsetHeight >= t.maxHeight）{ clearTimeout（t.timer）; return; } } o.style.height = （parseInt（o.style.height, 10） + t.action * step） + "px"; window.toggler[id].timer = setTimeout（"anim（""+id+""）",ms ）; } </script> <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> </head> <body> <h5 onclick="toggle（this.parentNode）;" >伸缩效果</h5> 内容<br/> 内容<br/> 内容<br/> 内容<br/><h5 onclick="toggle（this.parentNode）">伸缩效果</h5> sdf容<br/> sdf容<br/> sf容<br/> sfd容<br/><script> </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
慢慢展开菜单的效果，以前早就有人做过，给个时间函数。也算不上什么极限：

<html> <head> <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> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> <title>Cattom</title> <link href="link.css" rel="stylesheet" type="text/css"> </head> <script language="JavaScript">nereidFadeObjects = new Object（）; nereidFadeTimers = new Object（）; function nereidFade（object, destOp, rate, delta）{ if （！document.all） return if （object ！= "[object]"）{//提取串值 setTimeout（"nereidFade（"+object+","+destOp+","+rate+","+delta+"）",0）; return; } clearTimeout（nereidFadeTimers[object.sourceIndex]）; diff = destOp-object.filters.alpha.opacity; direction = 1; if （object.filters.alpha.opacity > destOp）{ direction = -1; } delta=Math.min（direction*diff,delta）; object.filters.alpha.opacity+=direction*delta; if （object.filters.alpha.opacity ！= destOp）{ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout（"nereidFade（nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+"）",rate）; } } </script> <body> <script language=javascript> var whichOpen=menuTitle1; var whichContinue=""; </script> <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</span> ::动漫同人志::</span></td></tr><tr><td> <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></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</span> ::动漫音乐::</span></td></tr><tr><td> <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></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</span> ::网页123::</span></td></tr><tr><td><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></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</span> ::兄弟站点::</span></td></tr><tr><td><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></td></tr></table> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>tree menu by jiarry</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="JavaScript" type="text/JavaScript"></script> <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> </head> <body>  <br/>  <br/> <font id="icon1">+</font>栏目一<span id=menu1_1 onMouseOver="this.style.backgroundColor="blue"" onMouseOut="this.style.backgroundColor=""" onclick="show_this（select1_1）"><font id="select1_1"></font>菜单一</span></font> <span id=menu1_2 onclick="show_this（select1_2）"><font id="select1_2"></font>菜单二</span></font> <span id=menu1_3 onclick="show_this（select1_3）"><font id="select1_3"></font>菜单三</span></font><font id="icon2">+</font>栏目二<span id=menu2_1 onclick="show_this（select2_1）"><font id="select2_1"></font>菜单一</span></font> <span id=menu2_2 onclick="show_this（select2_2）"><font id="select2_2"></font>菜单二</span></font> <span id=menu2_3 onclick="show_this（select2_3）"><font id="select2_3"></font>菜单三</span></font><font id="icon3">+</font>栏目三<span id=menu3_1 onclick="show_this（select3_1）"><font id="select3_1"></font>菜单一</span></font> <span id=menu3_2 onclick="show_this（select3_2）"><font id="select3_2"></font>菜单二</span></font> <span id=menu3_3 onclick="show_this（select3_3）"><font id="select3_3"></font>菜单三</span></font><font id="icon4">+</font>栏目四<span id=menu4_1 onclick="show_this（select4_1）"><font id="select4_1"></font>菜单一</span></font> <span id=menu4_2 onclick="show_this（select4_2）"><font id="select4_2"></font>菜单二</span></font> <span id=menu4_3 onclick="show_this（select4_3）"><font id="select4_3"></font>菜单三</span></font> <span id=menu4_4 onclick="show_this（select4_4）"><font id="select4_4"></font>菜单三</span></font> <span id=menu4_5 onclick="show_this（select4_5）"><font id="select4_5"></font>菜单三</span></font> <span id=menu4_6 onclick="show_this（select4_6）"><font id="select4_6"></font>菜单三</span></font> <span style=" border-top:1px solid gray;width:120px;margin-left:0px;"></span>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]