尝试写的一个简单的侧边导航菜单,写完了自己都不认识了.

最新推荐文章于 2022-04-15 14:56:20 发布

wsmh3333

最新推荐文章于 2022-04-15 14:56:20 发布

阅读量166

点赞数

分类专栏：备忘文章标签： J# HTML

备忘专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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>