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;
}
最终效果图
如果还有什么不明白的,请大家留言,以上所诉,如有错误,也请大家指正。