下拉垂直导航菜单功能实现

最新推荐文章于 2024-05-11 11:02:32 发布

幸福的小木鱼

最新推荐文章于 2024-05-11 11:02:32 发布

阅读量704

点赞数 1

分类专栏： JavaScript 文章标签：电子政务 menu function xhtml float html

本文链接：https://blog.csdn.net/lin_lujian/article/details/6914206

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉垂直导航菜单</title>
<style type="text/css">
	#nav{
		font-family:"宋体";
		font-size:13px;
		width:800px;
		margin:0 auto;
	}
	#menu1{
		width:100%;
		height:43px;
		list-style-type:none;
		margin:0;
		padding:0;
		background-image:url(images/menu-bg.gif);
		background-repeat:repeat-x;
	}
	#menu1 li{
		float:left;
	}
	#menu1 li a{
		display:block;
		padding:0 25px;
		line-height:43px;
		text-decoration:none;
		font-size:13px;
		color:#333333;
	}
	#menu1 li a:hover{
		color:red;
	}
	#menu1 li li{
		float:none; 
	}
	#menu1 li ul{
		position:absolute;/*防止挤压页面其他元素*/
		display:none;
		width:150px;      /*防止变形*/
		list-style:none;
		background-color:#CCCCCC;
		border-bottom:2px solid #0079B2;
		border-left:2px solid #0079B2;
		border-right:2px solid #0079B2;
	}
</style>
<script language="javascript">
	function init()
	{
		//获取menu1中的所有li元素
		var ulNode=document.getElementById("menu1");
		var liNodes=ulNode.getElementsByTagName("li");
		for(var index=0;index<liNodes.length;index++)
		{
			var ulNodes=liNodes[index].getElementsByTagName("ul");
			if(ulNodes.length>0)
			{
				//表示该li元素中包含有ul元素(二级菜单)
				liNodes[index].οnmοuseοver=function(){
					this.getElementsByTagName("ul")[0].style.display="block";
				};
				liNodes[index].οnmοuseοut=function(){
					this.getElementsByTagName("ul")[0].style.display="none";
				};
			}
		}
	}
	window.οnlοad=init;
</script>
</head>

<body>
	<div id="nav">
		<ul id="menu1">
			<li><a href="#">首页</a></li>
			<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>
				<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>
				<ul>
					<li><a href="#">电子政务</a></li>
					<li><a href="#">办公自动化</a></li>
					<li><a href="#">人力资源</a></li>
					<li><a href="#">企业进销存</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

幸福的小木鱼

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
下拉垂直导航菜单功能实现

下拉垂直导航菜单 #nav{ font-family:"宋体"; font-size:13px; width:800px; margin:0 auto; } #menu1{ width:100%; height:43px; list-style-type:none; margin:0; padding:0; backgro
复制链接

扫一扫

专栏目录