HTML+CSS/CSS3实现滑动下拉导航栏

HTML+CSS/CSS3实现滑动下拉导航栏

纯css实现的滑动下拉导航栏，超详细代码，以及实现中遇到的小问题

1. 首先创建一个列表以及一些标签的全局样式

html代码

		<div class="nav">
            <ul>
                <li><a href="">一级目录</a></li>
                <li><a href="">一级目录</a></li>
                <li><a href="">一级目录</a></li>
                <li><a href="">一级目录</a></li>
            </ul>
 		</div>

css代码

	* {
    	margin: 0;
    	padding: 0;
		}
	a {
    	text-decoration: none;
    	color: black;
		}
	a:hover {
    	text-decoration: none;
		}
	li {
    	list-style-type: none;
		}

初始效果图

2. 接下来给元素添加样式，让列表横向排列并且变得美观

	.nav{
    	height: 50px;
    	width: 400px;
    	background-color: #0173DD;
		}
	.nav ul {
    	width: 100%;
    	height: 100%;
		}
	.nav ul li {
    	float: left;
    	width: 80px;  
    	height: 100%;
    	text-align: center;
    	line-height: 50px;
    	margin-left: 10px;
		}
	.nav ul li a{
    	color: #fff;
		}

效果图如下

3.接下来在一级目录下添加二级目录
html代码

	<li>
        <a href="">一级目录</a>
        <div>
            <ul>
                <li><a href="">二级目录</a></li>
                <li><a href="">二级目录</a></li>
                <li><a href="">二级目录</a></li>
            </ul>
        </div>
    </li>

css代码

	.nav ul li div {
    	width: 80px;
    	height: 130px;
    	background-color: #fff;
    	border: 1px solid rgb(189, 189, 189);
    	border-radius: 10px;
		}
	.nav ul li div ul {
    	width: 100%;
   	 	height: 100%;
		}
	.nav ul li div ul li {
    	margin: 10px 3px 0 3px;
    	width: 74px;
    	height: 30px;
    	line-height: 30px;
		}
	.nav ul li div ul li a{
    	display: block;     /*填充li*/
    	color: #0173DD;
		}

实现的效果图为

4.现在要开始实现下拉的效果，有两种方式，第一种是通过display:none将二级目录隐藏后通过:hover去掉隐藏，来达到二级目录隐藏/出现的效果，但是这样会显的很突兀，用户体验不是很好，这里我们使用CSS3中的过渡效果transition来使二级目录达到隐藏/出现的效果，这样会显的交互效果很平滑。

css代码

.nav ul li div {
    overflow: hidden;/*元素溢出裁剪必须要用在li下的div中，后面会详细介绍原因*/
    width: 80px;
    height: 0;
    background-color: #fff;
    /*border: 1px solid rgb(189, 189, 189);*/
    border-radius: 10px;
    transition: height 0.2s ,border 0.2s linear;
    -moz-transition:height 0.2s ,border 0.2s linear;
    /* Safari and Chrome */
    -webkit-transition:height 0.2s ,border 0.2s linear;
    /* Opera */
    -o-transition:height 0.2s ,border 0.2s linear;
}
.nav ul li:hover div {
    height: 130px;
    border: 1px solid rgb(189, 189, 189);
}

这段代码中，我们需要把li下的div也就是包含着二级目录的div height设为0，从而使得div的height有一个0px～130px的变化，展现出一种下拉的效果，height必须为0，不能为空，如果为空，则div内部的元素会自动撑开div，使得div无法隐藏。同时，div的边框需要加在：hover中，否则div的边框无法隐藏，因为div的边框处于div外部，如果一个width为98px的div带有1px的边框，那么它实际上的width为100px，这样即使div的width为0px，它实际的宽度却是2px。

代码实现效果

5.以上下拉导航栏的效果就已经实现了，但是用在网页的制作上还会存在一些问题，一个网页不可能只有一个导航栏，导航栏的下方通常会有轮播图或者其它的内容，这个时候下拉导航栏就会出现以下问题。

会发现二级目录没有办法出现，因为二级目录被下方的图片覆盖，也就是说二级目录在图片的后面，存在但是没有办法看到，这时候就需要给li下的div加一个z-index属性，让二级目录出现在图片的前面，不被图片遮挡，而z-index属性只能用在被定位的元素上，也就是说需要有position：absolute或者position: relative，之前我将overflow: hidden加在了div里，如果加在了ul中，则会出现下面的效果。

正常来说，li下div为ul的子元素，当ul添加了overflow: hidden后，div溢出的的部分应该被裁减掉才对，可是这里却依然显示，原因是我们要使用z-index，而使用z-index的前提是需要position：absolute或者position: relative，拿absolute来说，是绝对定位，侧面来想添加了该属性的元素父元素变成了body，而ul是body的子元素，这个时候ul是没有权限去剪切li下div的溢出的，也就是孙子依赖了爷爷，父亲规定了要溢出剪切，不可行。因此overflow: hidden必须要加在li下的div中，这时我们在将z-index添加到：hover中，就可以了。

全部的html代码

<div class="nav">
  <ul>
    <li>
      <a href="">一级目录</a>
      <div>
        <ul>
        <li><a href="">二级目录</a></li>
        <li><a href="">二级目录</a></li>
        <li><a href="">二级目录</a></li>
        </ul>
      </div>
   </li>
     <li><a href="">一级目录</a></li>
     <li><a href="">一级目录</a></li>
     <li><a href="">一级目录</a></li>
  </ul>
 </div>
 <div>
   <img src="../img/1.jpg" alt="">
 </div>

全部的css代码

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: none;
}
li {
    list-style-type: none;
}
.nav{
    height: 50px;
    width: 400px;
    background-color: #0173DD;
}
.nav ul {
    width: 100%;
    height: 100%;
}
.nav ul li {
    float: left;
    width: 80px;  
    height: 100%;
    text-align: center;
    line-height: 50px;
    margin-left: 10px;
}
.nav ul li a{
    color: #fff;
}
.nav ul li div {
    overflow: hidden;
    position: absolute;
    width: 80px;
    height: 0;
    background-color: #fff;
    /*border: 1px solid rgb(189, 189, 189);*/
    border-radius: 10px;
    transition: height 0.2s ,border 0.2s linear;
    -moz-transition:height 0.2s ,border 0.2s linear;
    /* Safari and Chrome */
    -webkit-transition:height 0.2s ,border 0.2s linear;
    /* Opera */
    -o-transition:height 0.2s ,border 0.2s linear;
}
.nav ul li:hover div {
    height: 130px;
    border: 1px solid rgb(189, 189, 189);
    z-index: 10;
}
.nav ul li div ul {
    width: 100%;
    height: 200px;
}
.nav ul li div ul li {
    margin: 10px 3px 0 3px;
    width: 74px;
    height: 30px;
    line-height: 30px;
}
.nav ul li div ul li a{
    display: block;     /*填充li*/
    color: #0173DD;
}

最终效果图

如果还有什么不明白的，请大家留言，以上所诉，如有错误，也请大家指正。