基于mootools的简单下拉菜单类

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值