<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>drop menu </title>
<script type="text/javascript" src="mt.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;
}
li{list-style:none;
}
.menu{float:left;display:inline;font-family:Arial;font-size:11px
}
.menu a{text-align:center;color:#4298FF;width:60px;height:20px;line-height:20px;background-color:#e7e7e7;margin-right:3px;display:block;text-decoration:none;
}
.menu a:hover{background-color:#e7c7e7;color:#fff;
}
.submenu{width:60px;display:none;
}
.menu .submenu li{float:none;width:60px;margin:2px 0;text-align:center;
}
.menu .submenu li a{text-decoration:none;font-size:11px;background-color:#e7e7e7;color:#4298FF;
}
.menu .submenu li a:hover{background-color:#e7c7e7;color:#fff;}
</style>
<ul id="nav">
<li class="menu"><a href="">one</a>
<ol class="submenu">
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
</ol>
</li>
<li class="menu" ><a href="">two</a>
<ol class="submenu">
<li><a href="">2</a></li>
<li><a href="">2</a></li>
<li><a href="">2</a></li>
<li><a href="">2</a></li>
</ol>
</li>
<li class="menu" ><a href="">three</a>
<ol class="submenu">
<li><a href="">3</a></li>
<li><a href="">3</a></li>
<li><a href="">3</a></li>
<li><a href="">3</a></li>
</ol>
</li>
<li class="menu" ><a href="">four</a>
<ol class="submenu">
<li><a href="">4</a></li>
<li><a href="">4</a></li>
<li><a href="">4</a></li>
<li><a href="">4</a></li>
</ol>
</li>
<li class="menu" ><a href="">five</a>
<ol class="submenu">
<li><a href="">5</a></li>
<li><a href="">5</a></li>
<li><a href="">5</a></li>
<li><a href="">5</a></li>
</ol>
</li>
</ul>
<ul id="nav2">
<li class="menu"><a href="">one</a>
<ol class="submenu">
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
</ol>
</li>
<li class="menu" ><a href="">two</a>
<ol class="submenu">
<li><a href="">2</a></li>
<li><a href="">2</a></li>
<li><a href="">2</a></li>
<li><a href="">2</a></li>
</ol>
</li>
<li class="menu" ><a href="">three</a>
<ol class="submenu">
<li><a href="">3</a></li>
<li><a href="">3</a></li>
<li><a href="">3</a></li>
<li><a href="">3</a></li>
</ol>
</li>
<li class="menu" ><a href="">four</a>
<ol class="submenu">
<li><a href="">4</a></li>
<li><a href="">4</a></li>
<li><a href="">4</a></li>
<li><a href="">4</a></li>
</ol>
</li>
<li class="menu" ><a href="">five</a>
<ol class="submenu">
<li><a href="">5</a></li>
<li><a href="">5</a></li>
<li><a href="">5</a></li>
<li><a href="">5</a></li>
</ol>
</li>
</ul>
<script type="text/javascript">
var dropMenu = new Class({
initialize : function(navId,menuClass){
this.t = false;
this.current = null;
var lis = $(navId).getElementsByTagName('li');
for(var i=0;i<lis.length; i++){
if (lis[i].className != menuClass) continue;
var thislink = this.findChild(lis[i],'a');
thislink.onmouseover = this.showMenu.bindWithEvent(this);
thislink.onmouseout = this.startTimer.bind(this);
if (ol = this.findChild(lis[i], 'ol')){
for(var k=0; k<ol.childNodes.length;k++){
ol.childNodes[k].onmouseover = this.resetTimer.bind(this);
ol.childNodes[k].onmouseout = this.startTimer.bind(this);
}
}
}
},
showMenu : function(e){
var e = new Event(e);
var thelink = e.target;
this.resetTimer();
if( this.current) this.hideMenu(this.current);
thelink = thelink.parentNode;
this.current = thelink;
var ol = this.findChild(thelink, 'ol');
if (!ol) return ;
ol.style.display = 'block';
},
hideMenu : function(thelink){
var ol = this.findChild(thelink, 'ol');
if(!ol) return;
ol.style.display = 'none';
},
findChild : function(obj,tag){
if(obj.getElementsByTagName(tag)!=null){
return obj.getElementsByTagName(tag)[0]
}else{
return false;
}
},
startTimer : function(){
var current = this.current;
var hide = this.hideMenu.bind(this); //closure need (如果不用bind,执行hideMenu 中的上下文,this.findChild将出错,this此时为window)
this.t = window.setTimeout(function(){hide(current)}, 200);
},
resetTimer: function(){
if(this.t) clearTimeout(this.t);
// alert(this.t);
}
})
var myMenu = new dropMenu('nav','menu');
var myMenu2 = new dropMenu('nav2','menu');
</script>
</body>
</html>