导航

css写二级导航详解

Posted on 2013-04-06 23:05  曙光城邦  阅读(674)  评论(0)    收藏  举报

效果图： 兼容ie678 火狐

 

<style>
body,ul{
 margin:0;padding:0;
}

a{
text-decoration:none;
}
/*清除样式，使各浏览器兼容ul样式*/
ul{
list-style:none;
}
/*一级导航的宽度和高度*/
#nav{  
 height:90px;
 width:100%;
}
/*导航里的所有li 都左侧浮动*/
#nav li{
	float:left;
	height:80px;
	border-right: 1px solid #131313;
	background:green;
	position: relative; /*该属性用于二级导航，使二级导航里li的绝对定位生效*/
}

#nav li a{
	color:white;
	width:160px;
	display:block;/*使a元素块级化，用于制作hover状态下的效果*/
	background:silver;
	padding:0 30px;
	line-height:80px;/*设置line-height 文字垂直居中*/
}
/*hover效果*/
#nav li a:hover{
background-color:red;
}


#nav ul{
	position:absolute;/*使二级导航脱离文档流，不占用空间*/
	left:0;
	width:160px;/*指定二级导航的宽度，将float的li限定在一列中*/
}



</style>
<body>
<div  style="background:gold">
<ul id="nav">
	<li><a href="#">国内电影</a>
		<ul>
			<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>
		</ul>
	</li>
	<li><a href="#">综艺电影</a></li>
	<li><a href="#">科幻电影</a></li>
	<li><a href="#">生活电影</a></li>
	<li><a href="#">手机电影下载</a></li>
	<li><a href="#">爱情</a></li>
	<li><a href="#">喜剧电影</a></li>
</ul>
</div>

<!-- 这个div 用于测试导航下边的内容。  因为二级导航的position:absolute;使二级导航脱离文档流，所以二级导航不占用空间。 下面的内容紧贴导航-->
<div> hello world adfafasdfsssssssssssssss<br/>

 hello world adfafasdfsssssssssssssss<br/>
  hello world adfafasdfsssssssssssssss<br/> hello world adfafasdfsssssssssssssssasdfasfsdafsaffffffffffffffffffdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   hello world adfafasdfsssssssssssssss<br/> hello world adfafasdfsssssssssssssss<br/> hello world adfafasdfsssssssssssssssssssssssssssssssssssssssssss<br/></div>

</body>

 


 

 

用css写出导航后，就可以用js控制样式，达到显示和隐藏二级导航的效果了。可能比较疑惑的就是一级导航的li为relative，二级导航的ul为absolute。

二：下面就测试一下，脱离文档流不占用空间的absolute。

效果图：

 

代码：

<style>

.pbox{
width:400px;
height:600px;
background:silver;
position:relative;/*父元素relative·*/
}

.cbox1{
background:green;
width:150px;
height:300px;
}

.cbox2{
background:red;
width:150px;
height:300px;

position:absolute;/*脱离文档流，不占用空间*/
left:10px;
}

</style>

<div class="pbox"><!--含有三个子div元素,pbox为relative-->

 <div class="cbox1"></div>
 <div class="cbox2"></div>
 <div>adsfdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div><!--该div 紧跟cbox1的div，因为cbox2已经不占用空间了-->
  
</div>

 

 

 

三、JS控制二级导航的显示与隐藏

<style>
body,ul{
 margin:0;padding:0;
}

a{
text-decoration:none;
}

ul{
list-style:none;
}

#nav{
 height:90px;
 width:100%;
}

#nav li{
	float:left;
	height:80px;
	border-right: 1px solid #131313;
	background:green;
	position: relative;
}

#nav li a{
	color:white;
	width:160px;
	display:block;
	background:silver;
	padding:0 30px;
	line-height:80px;
}

#nav li a:hover{
background-color:red;
}


#nav li ul{
	position:absolute;
	left:0;
	width:160px;
	
	display:none;/*让二级导航隐藏*/
}

#nav li.show ul{
	display:block; /*显示二级导航的css*/
}


</style>

<script>

window.onload=function(){
 var nav = document.getElementById("nav");
 alert(nav.childNodes.length);
 for (i=0; i < nav.childNodes.length; i++) {
  var childNod = nav.childNodes[i];
  if (childNod.nodeName=="LI") {
	childNod.onmouseover=function(){
	 this.className+=" show";//添加显示样式
	};
	childNod.onmouseout=function() {
	 this.className=this.className.replace(" show", "");//删除显示样式
	};
  };
 }
}

</script>

<body>
<div  style="background:gold">
<ul id="nav">
	<li ><a href="#">国内电影</a>
		<ul>
			<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>
		</ul>
	</li>
	<li><a href="#">综艺电影</a></li>
	<li><a href="#">科幻电影</a></li>
	<li><a href="#">生活电影</a></li>
	<li><a href="#">手机电影下载</a></li>
	<li><a href="#">爱情</a></li>
	<li><a href="#">喜剧电影</a></li>
</ul>
</div>

<div> hello world adfafasdfsssssssssssssss<br/>

 hello world adfafasdfsssssssssssssss<br/>
  hello world adfafasdfsssssssssssssss<br/> hello world adfafasdfsssssssssssssssasdfasfsdafsaffffffffffffffffffdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
   hello world adfafasdfsssssssssssssss<br/> hello world adfafasdfsssssssssssssss<br/> hello world adfafasdfsssssssssssssssssssssssssssssssssssssssssss<br/></div>

</body>