Mootools

当前位置:首页>Mootools>基於mootools的簡單下拉菜單類

基於mootools的簡單下拉菜單類

时间:2015-06-12 20:15来源:网络整理 作者:KKWL 点击:
!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     titledrop menu /title     script type="text/javascript" src="mt

<!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>
<li><a href="">one</a>
<ol>
<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 ><a href="">two</a>
<ol>
<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 ><a href="">three</a>
<ol>
<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 ><a href="">four</a>
<ol>
<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 ><a href="">five</a>
<ol>
<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>
<li><a href="">one</a>
<ol>
<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 ><a href="">two</a>
<ol>
<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 ><a href="">three</a>
<ol>
<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 ><a href="">four</a>
<ol>
<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 ><a href="">five</a>
<ol>
<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>

------分隔线----------------------------