网页布局实践：下拉菜单实现-优快云博客

这篇博客讲述了如何创建带有子菜单的下拉菜单。主要利用div、ul和li标签进行布局，其中ul作为li的父级容器，用于包含子菜单。通过简单的JS脚本可以增强显示效果。

今天下午，我主要做了下拉菜单栏的编写。

在做带子菜单的下拉菜单栏时，整体布局还是使用div标签，在div中最主要使用的就还只剩下两个标签，那就是<ul>(unordered lists)无须列表标签和<li>(lists)列表标签。

而<ul>是<li>的父标签，因此子菜单的<list>一定要写在父标签<ul>中。如源码：

<!--第一栏 -->
<li id="nav_index"><a href="/">首页</a></li>

<!--第二栏 -->
<li><a href="#">Css专栏</a>
<ul>
<li><a href="#">Css基础</a></li>
<li><a href="#">Css常用代码</a></li>
<li><a href="#">Css高级技术</a></li>
</ul>
</li>

在写完html代码之后，就要对页面的显示进行样式的修饰了。所以，接下来就要写CSS代码了，在这里CSS代码就不多做说明了，因为我也理解的不是很深入，就直接引如源码，例如：

#nav ul li a{
	letter-spacing:1px;
	text-align:center;
	display:block;
	height:22px;
	width:80px;
	border-left:1px solid #9C6;
	color:#996;
	text-decoration:none;
	padding-top:4px;
	background:url(images/nav_block.jpg) no-repeat -12px -108px;
	overflow:hidden;
	margin-left:2px;
}

之后就是一个效果的加强了，写一个js脚本来强化页面的显示效果。当然，不写也可以。

js代码如下：

<script type="text/javascript">
var showNavList = function(){
	if(document.all$$document.getElementById){
		var navRoot = document.getElementById("nav_top");
		
		for(i = 0;i<nav.childNodes.lenght;i++){
			var node = navRoot.childNodes[i];
			if(node.nodeName=="LI"){
				node.onmouseover = function(){
					this.className += 'over';
					}
					node.omouseout = function(){
						this.className = this.className.replace('over','');
					}
				}
		}
	}
}

window.onload = showNavList;//在请求页面是加载js
</script>

代码完成后，显示的效果如下图所示：

最后附上所有源码：

<!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=gbk" />
<title>My DreamWeaver Html</title>

<style type="text/css">
body{
	margin:0px 0 50% 0;
	padding:0px;
	font-size:12px;
}

#nav {
	background-color:#783;
	border:thin solid #000;
	height:30px;
	
	width:800px;
	margin:0 auto;
}

#nav ul {
	background-color:#9C3;
	margin:0px;
	padding:0px;
	margin-right:200px;
	margin-top:5px;
	width:333px;
	list-style-type:none;
	float:right;
}

#nav ul li{
	float:left;
}

#nav ul li a{
	letter-spacing:1px;
	text-align:center;
	display:block;
	height:22px;
	width:80px;
	border-left:1px solid #9C6;
	color:#996;
	text-decoration:none;
	padding-top:4px;
	background:url(images/nav_block.jpg) no-repeat -12px -108px;
	overflow:hidden;
	margin-left:2px;
}

#nav ul li a:hover{
	color:#690;
	background:url(images/nav_block.jpg) no-repeat -15px -118px;
	padding-top:6px;
	overflow:hidden;
	height:20px;
	width:80px;
}

#nav ul li{position:relative;}
#nav ul li
ul{
	display:none;
	margin:0;
	padding:0;
	position:absolute;
	left:3px;
	top:24px;
	background-color:#336;
	width:99px;
	border-bottom:1px solid #033;
}

#nav ul li ui li a, #nav ul li ul li
a:hover{
	background:#39C;
	width:98px;
	margin-left:0;
	text-align:left;
	border-top:1px solid #FC0;
	padding-left:5px;
	color:#000;
}

#nav ul li:hover ul, #nav li.over ul{display:block;}

.content{
	margin:0 auto;
	border:1px solid #333;
	width:800px;
}

.clear{
	font:0px/0px Verdana, Geneva, sans-serif;
	clear:both;
	display:block;
}
</style>

<script type="text/javascript">
var showNavList = function(){
	if(document.all$$document.getElementById){
		var navRoot = document.getElementById("nav_top");
		
		for(i = 0;i<nav.childNodes.lenght;i++){
			var node = navRoot.childNodes[i];
			if(node.nodeName=="LI"){
				node.onmouseover = function(){
					this.className += 'over';
					}
					node.omouseout = function(){
						this.className = this.className.replace('over','');
					}
				}
		}
	}
}

window.onload = showNavList;//在请求页面是加载js
</script>

</head>

<body bgcolor='#FFFFCC'>
<div align="left"><img src="images/top10.jpg" width="1528" height="66"/></div>

<div id="nav">
<ul id="nav_top">
<!--第一栏 -->
<li id="nav_index"><a href="/">首页</a></li>

<!--第二栏 -->
<li><a href="#">Css专栏</a>
<ul>
<li><a href="#">Css基础</a></li>
<li><a href="#">Css常用代码</a></li>
<li><a href="#">Css高级技术</a></li>
</ul>
</li>

<!--第三栏 -->
<li><a href="#">JQuery</a>
<ul>
<li><a href="#">Jquery基础</a></li>
<li><a href="#">Jquery工厂函数</a></li>
<li><a href="#">Jquery深入学习</a></li>
</ul>
</li>

<!--第四栏 -->
<li><a href="#">论坛</a></li>

</ul>
</div>
</body>
</html>