首页 > 代码库 > 下拉菜单:可快速定义一二级菜单颜色

下拉菜单:可快速定义一二级菜单颜色

* 下拉菜单,为了用户方便,可以自定义一二级菜单的鼠标移入移出颜色。

* 在IE6+,chrome,FF浏览器上测试通过。

* 唯一缺憾就是IE6下,下拉菜单无法遮挡底部文字。有兴趣的用户可以自行修改css样式。


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
*{margin:0;padding:0;list-style:none;}
p{clear:left;}
a{text-decoration: none;}
body{color:black;font-size:14px;}
#ceshi{width:100%;position:relative;z-index:999;}
#ceshi ul{width:100%;}
#ceshi ul li{float:left;width:200px;text-align:center;line-height:30px;height:30px;}
#ceshi ul li ul{display:none;}
#ceshi ul li ul li{width:200px;border-bottom:1px solid #ccc;text-align:center;line-height:30px;}
</style>
<script>
window.onload=function(){
	function menu(divId,a,b,c,d,e,f,g,h){
		var oDiv=document.getElementById(divId);	
		if (oDiv){
			var oUl=oDiv.getElementsByTagName("ul");
			var oLi1,oLi2;//一级li,二级li
			var objColor={bgColor:[a,b,c,d],ftColor:[e,f,g,h]};
			for (var i=1;i<oUl.length;i++){
				oLi1=oUl[i].parentNode;
				oLi1.style.backgroundColor=objColor['bgColor'][0];
				oLi1.getElementsByTagName('a')[0].style.color=objColor['ftColor'][0];
				oLi1.onmouseover=function(){
					this.style.backgroundColor=objColor['bgColor'][1];
					this.getElementsByTagName('a')[0].style.color=objColor['ftColor'][1];
					this.getElementsByTagName('ul')[0].style.display='block';
				};
				oLi1.onmouseout=function(){
				this.style.backgroundColor=objColor['bgColor'][0];
				this.getElementsByTagName('a')[0].style.color=objColor['ftColor'][0];
				this.getElementsByTagName('ul')[0].style.display='none';
				};
				oLi2=oUl[i].getElementsByTagName('li');
				for(var j=0;j<oLi2.length;j++){
					oLi2[j].style.backgroundColor=objColor['bgColor'][2];
					oLi2[j].getElementsByTagName('a')[0].style.color=objColor['ftColor'][2];
					oLi2[j].onmouseover=function(){
						this.style.backgroundColor=objColor['bgColor'][3];
						this.getElementsByTagName('a')[0].style.color=objColor['ftColor'][3];
					};
					oLi2[j].onmouseout=function(){
					this.style.backgroundColor=objColor['bgColor'][2];
					this.getElementsByTagName('a')[0].style.color=objColor['ftColor'][2];
					};
				}
			}
		}else{
			alert('未找到  \"'+divId+'\"  对象');
		}
	}
	menu('ceshi','#eee','#ddd','#eee','#2e2e2e','#222','#000','#777','#fff');
	//ceshi为id
	//第2个至第5参数为背景颜色,后四个参数为<A>字体颜色
	//颜色列表分别为一级菜单鼠标移入前,一级菜单鼠标移入,二级菜单鼠标移入前,二级菜单鼠标移入
}
</script>
</head>
<body>
<div id=ceshi>
	<ul>
	<li><a href=http://www.mamicode.com/"">测试栏目a>

下拉菜单:可快速定义一二级菜单颜色