尝试写的一个简单的侧边导航菜单,写完了自己都不认识了.
<html><head><title>menu</title><style><!--body{margin:0px;}.main{height:25px;line-height:25px;width:120px;}.main a{height:25px;line-height:25px;width:120px; text-align:center; font-size:14px; font-weight:bold; background:#0066FF; color:#FFFFFF;display:block; text-decoration:none;}.main a:hover{background:#0000FF;}.son{height:20px;line-height:20px;width:100px;margin-left:20px;}.par{background:#F6F6F6;overflow:hidden; margin:0px;}.son a{ text-decoration:none; color:#333333;}.son a:hover{color:#FF0000;}--></style></head><body><table width="120" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div href="#">MENU1</a></div> <div id="menu0" href="#">MENU2</a></div> <div id="menu1" href="#">MENU3</a></div> <div id="menu2" name="code"><script language="javascript" type="text/javascript"><!--function $(id){return document.getElementById(id);}function $N(name){return document.getElementsByName(name);}function Xmenu(){var obj=$N("main");var ht=new Array();var h=0;var ch=0;var ox=10;var cx=20;for(i=0;i<obj.length;i++){obj[i].n=i;ht[i]=$("menu"+i).offsetHeight;$("menu"+i).closeRun=0;$("menu"+i).runing=0;$("menu"+i).h=0;$("menu"+i).ch=0;$("menu"+i).style.height=0+"px";$("menu"+i).style.display="none";obj[i].onclick=function(){for(m=0;m<obj.length;m++){if($("menu"+m).style.display!="none"&&$("menu"+m).closeRun==0){clearInterval($("menu"+m).openMenu);if(m!=this.n){$("menu"+m).runing=0;}ch=$("menu"+m).offsetHeight;$("menu"+m).closeMenu=setInterval("cl("+m+")",20);$("menu"+m).closeRun=1;}}if(($("menu"+this.n).style.display=="none"||$("menu"+this.n).runing==0)&&$("menu"+this.n).h!=ht[this.n]){clearInterval($("menu"+this.n).closeMenu);if($("menu"+this.n).style.display=="none"){$("menu"+this.n).style.height=1+"px";$("menu"+this.n).style.display="block";}else{$("menu"+this.n).h=$("menu"+this.n).offsetHeight;}$("menu"+this.n).closeRun=0;$("menu"+this.n).openMenu=setInterval("op("+this.n+")",20);}else{$("menu"+this.n).runing=0;}}}this.op=function(j){$("menu"+j).h+=ox;if($("menu"+j).h>=ht[j]){$("menu"+j).style.height=ht[j]+"px";clearInterval($("menu"+j).openMenu);$("menu"+j).runing=0;return;}$("menu"+j).runing=1;$("menu"+j).style.height=$("menu"+j).h+"px";}this.cl=function(m){$("menu"+m).h-=cx;if($("menu"+m).h<=0){$("menu"+m).style.height=1+"px";$("menu"+m).style.display="none";clearInterval($("menu"+m).closeMenu);$("menu"+m).closeRun=0;return;}$("menu"+m).style.height=$("menu"+m).h+"px";}}Xmenu();--></script>