码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-11-07 16:58:32      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   os   sp   for   

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

* 在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="">测试栏目a</a>
		<ul><li><a href="">测试子栏目a</a></li><li><a href="">测试子栏目a测试子栏目a测试子栏目a测试子栏目a</a></li><li><a href="">测试子栏目a</a></li></ul>
	</li>
	<li><a href="">测试栏目b</a>
		<ul><li><a href="">测试子栏目b</a></li><li><a href="">测试子栏目</a></li><li><a href="">测试子栏目</a></li></ul>
	</li>
	<li><a href="">测试栏目c</a>
		<ul><li><a href="">测试子栏目c</a></li><li><a href="">测试子栏目</a></li><li><a href="">测试子栏目</a></li></ul>
	</li>
	</ul>
</div>
<p>
这是一段测试菜单是否遮挡数据的文字。<BR>
这是一段测试菜单是否遮挡数据的文字。<BR>
</p>

</body>
</html>


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

标签:style   blog   http   io   color   ar   os   sp   for   

原文地址:http://blog.csdn.net/jellylv/article/details/40895067

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!