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

HTML+CSS/CSS3实现滑动下拉导航栏纯css实现的滑动下拉导航栏，超详细代码，以及实现中遇到的小问题首先创建一个列表以及一些标签的全局样式html代码<div class="nav"><ul><li><a href="">一级目录</a></li><li><a href="">一级目录</

Menkongkong

10494人浏览 · 2020-05-19 00:25:16

Menkongkong · 2020-05-19 00:25:16 发布

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

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

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

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;
}