WEB前端：02_Menu下拉菜单

最新推荐文章于 2023-03-16 08:04:31 发布

weixin_30249203

最新推荐文章于 2023-03-16 08:04:31 发布

阅读量114

点赞数

原文链接：http://www.cnblogs.com/haicheng/p/3695865.html

版权

menu下拉菜单

网站常用效果之一以下为简化版，用于学习javascript基础知识。

效果图：

menu下拉菜单 - 纯JS简化版

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menu下拉菜单 - 纯JS简化版</title>
<style type="text/css">

*{margin: 0; padding: 0;}

#nav{height:42px;position:relative;margin-bottom:15px;z-index:9; background:#666;margin: 0 auto; list-style: none;}
#nav a,#nav a:link{color:#ffffff;display:block;width:142px; font-size: 12px; text-decoration: none;}
#nav a:hover{background:#cc0000; color:#FFFFFF;}
#nav ul li{float:left;width:143px;text-align:center;line-height:42px;position:relative;height:42px; background:url(images/line.png) center right no-repeat;list-style: none;}
#nav ul li ul{position:absolute;top:42px;left:0px;display:none;z-index:9;background:#333;border-top:none;border-radius:0 0 4px 4px;box-shadow:3px 3px 6px 1px #efefef;}
#nav ul li ul li{line-height:42px;height:42px; background:none; border-bottom:1px solid #999;}
#nav ul li ul a:hover,#nav ul li.pcls{background:#cc0000;color:#FFFFFF;}
#nav ul li ul li ul{top:0px;left:142px;}
#nav ul .navon, #nav ul li ul .navon {background: #f00;}

</style>
<script type="text/javascript">
window.onload = function() {
	var nav = document.getElementById('nav');
	var navli = nav.getElementsByTagName('li');

	for(var i=0; i<navli.length; i++) {

		navli[i].onmouseover = function() {
			if(this.parentNode.parentNode.id != "nav") {
				this.parentNode.parentNode.className = "navon";
			}
			for(var subul=this.childNodes, f=0; f<subul.length; f++) {
				if(subul[f].tagName=='UL') {
					subul[f].style.display = "block";
				}
			}
		};

		navli[i].onmouseout = function() {
			if(this.parentNode.parentNode.id != "nav") {
				this.parentNode.parentNode.className = "";
			}
			for(var subul=this.childNodes, f=0; f<subul.length; f++) {
				if(subul[f].tagName=="UL") {
					subul[f].style.display = "none";
				}
			}
		};
		
	}
}
</script>
</head>
<body>

<div id="nav">
<ul>
	<li><a href="#">网站首页</a></li>
	<li><a href="#">公司简介</a>
		<ul>
			<li><a href="#">企业文化</a>
				<ul>
					<li><a href="#">文化一</a></li>
					<li><a href="#">文化二</a></li>
					<li><a href="#">文化三</a></li>
					<li><a href="#">文化四</a></li>
				</ul>
			</li>
			<li><a href="#">组织结构</a></li>
			<li><a href="#">公司活动</a></li>
			<li><a href="#">荣誉资质</a></li>
		</ul>
	</li>
	<li><a href="#">公司新闻</a></li>
	<li><a href="#">产品展示</a></li>
	<li><a href="#">客户留言</a></li>
	<li><a href="#">联系我们</a></li>
</ul>
</div>

</body>
</html>

menu下拉菜单 - 面向对象版

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menu下拉菜单 - 面向对象版</title>
<style type="text/css">

*{margin: 0; padding: 0;}

#nav{height:42px;position:relative;margin-bottom:15px;z-index:9; background:#666;margin: 0 auto; list-style: none;}
#nav a,#nav a:link{color:#ffffff;display:block;width:142px; font-size: 12px; text-decoration: none;}
#nav a:hover{background:#cc0000; color:#FFFFFF;}
#nav ul li{float:left;width:143px;text-align:center;line-height:42px;position:relative;height:42px; background:url(images/line.png) center right no-repeat;list-style: none;}
#nav ul li ul{position:absolute;top:42px;left:0px;display:none;z-index:9;background:#333;border-top:none;border-radius:0 0 4px 4px;box-shadow:3px 3px 6px 1px #efefef;}
#nav ul li ul li{line-height:42px;height:42px; background:none; border-bottom:1px solid #999;}
#nav ul li ul a:hover,#nav ul li.pcls{background:#cc0000;color:#FFFFFF;}
#nav ul li ul li ul{top:0px;left:142px;}
#nav ul .navon, #nav ul li ul .navon {background: #f00;}

</style>
<script type="text/javascript">

function menu(menuid) {
	var _this = this;
	var menu = document.getElementById(menuid);
	this.menuli = menu.getElementsByTagName('li');

	for(var i=0; i<this.menuli.length; i++) {
		this.menuli[i].onmouseover = function() {
			_this.hoverfn(this, menuid, "navon", "block");
		};
		this.menuli[i].onmouseout = function() {
			_this.hoverfn(this, menuid, "", "none");
		};
	};
}

menu.prototype.hoverfn = function(obj, menuid, onclass, display) {
	if(obj.parentNode.parentNode.id != menuid) {
		obj.parentNode.parentNode.className = onclass;
	}
	for(var subul=obj.childNodes, f=0; f<subul.length; f++) {
		if(subul[f].tagName=="UL") {
			subul[f].style.display = display;
		}
	}
}

window.onload = function() {
	new menu('nav');
}


</script>
</head>
<body>

<div id="nav">
<ul>
	<li><a href="#">网站首页</a></li>
	<li><a href="#">公司简介</a>
		<ul>
			<li><a href="#">企业文化</a>
				<ul>
					<li><a href="#">文化一</a></li>
					<li><a href="#">文化二</a></li>
					<li><a href="#">文化三</a></li>
					<li><a href="#">文化四</a></li>
				</ul>
			</li>
			<li><a href="#">组织结构</a></li>
			<li><a href="#">公司活动</a></li>
			<li><a href="#">荣誉资质</a></li>
		</ul>
	</li>
	<li><a href="#">公司新闻</a></li>
	<li><a href="#">产品展示</a></li>
	<li><a href="#">客户留言</a></li>
	<li><a href="#">联系我们</a></li>
</ul>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/haicheng/p/3695865.html

weixin_30249203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端：02_Menu下拉菜单

menu下拉菜单网站常用效果之一以下为简化版，用于学习javascript基础知识。效果图：menu下拉菜单 - 纯JS简化版<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>men...
复制链接

扫一扫