尝试写的一个简单的侧边导航菜单,写完了自己都不认识了.
<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 class="main"><a name="main" href="#">MENU1</a></div>
<div id="menu0" class="par">
<div class="son"><a href="#">sonmenu1</a></div>
<div class="son"><a href="#">sonmenu2</a></div>
<div class="son"><a href="#">sonmenu3</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="main"><a name="main" href="#">MENU2</a></div>
<div id="menu1" class="par">
<div class="son"><a href="#">sonmenu1</a></div>
<div class="son"><a href="#">sonmenu2</a></div>
<div class="son"><a href="#">sonmenu3</a></div>
<div class="son"><a href="#">sonmenu4</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="main"><a name="main" href="#">MENU3</a></div>
<div id="menu2" class="par">
<div class="son"><a href="#">sonmenu1</a></div>
<div class="son"><a href="#">sonmenu2</a></div>
<div class="son"><a href="#">sonmenu3</a></div>
<div class="son"><a href="#">sonmenu4</a></div>
</div>
</td>
</tr>
</table>
</body>
</html><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>