js二级菜单之滑动菜单
因要做一个可以滑动的二级菜单，如果使用jq库的话，做出来很简单，为了这么点功能在页面里加一个几十kb东西不值得，于是自己照着参考书上弄出来一个。
效果如下面的，先发在博客里，以后改进了，会更新。js实现slideup，slidedown的方法是从精通javascript上看到的。
源代码如下：http://code.google.com/p/emize/source/browse/trunk/sdmenu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
ul#menu,ul#menu ul{padding:0;margin:0;width:100px;overflow:hidden;}
ul#menu a{background:#aaa;width:100px;display:block;}
ul#menu ul li{background:#ddd;}
</style>
<script type="text/javascript">
function resetcss(elem,s){
old={};
for (i in s){
old[i]=elem.style[i];
elem.style[i]=s[i] ;
}
return old;
}
function restore(elem,old){
for (i in old){
elem.style[i]=old[i]
}
}
function getStyle(ele,name){
if (ele.style[name])
return ele.style[name];
else if (ele.currentStyle)
return ele.currentStyle[name];
else if(document.defaultView && document.defaultView.getComputedStyle){
name=name.replace(/[A-Z]/g,"-$1");
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(ele,"");
return s&&s.getPropertyValue(name);
}else
return null;
}
function getHeight(ele){
return parseInt(getStyle(elem,'height'));
}
function fullHeight(elem){
if (getStyle(elem,'display')!='none')
return elem.offsetHeight || getHeight(elem);
var old=resetcss(elem,{display:"",visibility:"Hidden",position:"absolute"});//重置css，获得高度
var h=elem.clientHeight || getHeight(elem);
restore(elem,old);//恢复css
return h;
}
function slidedown(ele){
var _eleheight=fullHeight(ele);
for (var i=0;i<=100;i+=20){
(function(){
var pos = i;
setTimeout(function(){
if (pos==0){ele.style.display="block";}
ele.style.height=(pos/100)*_eleheight+"px";
},(pos+1)*5);
})();
};
}
function slideup(ele){
var _eleheight=fullHeight(ele);
for (var i=0;i<=100;i+=20){
(function(){
var pos = i;
setTimeout(function(){
ele.style.height=(1-(pos/100))*_eleheight+"px";
if (pos==100){ele.style.display="none";ele.style.height="";};
},(pos+1)*5);
})();
};
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var $$=function(id){return typeof id == "string" ? document.getElementById(id) : id};
var Class = {
create: function() {
return function() {
this.init.apply(this, arguments);
}
}
};
var Sdmenu=Class.create();
Sdmenu.prototype={
init:function(id){
var othis=this,o=$$(id);
this.ou=o.getElementsByTagName("ul");
this.oa=o.getElementsByTagName("a");
this.licount=this.ou.length;
this.Each(function(i){
this.ou[i].style.display="none";
addEventHandler(this.oa[i],"click",function(){othis.othbox.call(othis,i)})
})
},
othbox:function(j){
this.Each(function(i){if (this.ou[i].style.display=="block"&&i!=j){slideup(this.ou[i])}});
if (this.ou[j].style.display=="none") {slidedown(this.ou[j])};
},
Each:function(fun){
for (var i=0;i<this.licount;i++){fun.call(this,i)};
}
};
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">no.1</a>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</li>
<li><a href="#">no.2</a>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</li>
<li><a href="#">no.3</a>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var mymenu=new Sdmenu("menu");
</script>
</body>
</html>
调用方法：var mymenu=new Sdmenu(“menu”);//menu为ul的id；
具体的思路就是：给每个导航按钮附加一个事件。这个事件触发的时候，遍历下其他的按钮，没关上的关上，并滑开点击的那个按钮。
iteye博客文章里好像不能插入js代码。具体的效果在我的独立博客里可以看得到：
http://blog.mize.in/archives/1271.html