HTML+CSS/CSS3实现滑动下拉导航栏 |
您所在的位置：网站首页 › html下拉列表日期自动出现 › HTML+CSS/CSS3实现滑动下拉导航栏 |
HTML+CSS/CSS3实现滑动下拉导航栏
|
HTML+CSS/CSS3实现滑动下拉导航栏
纯css实现的滑动下拉导航栏，超详细代码，以及实现中遇到的小问题 首先创建一个列表以及一些标签的全局样式html代码 一级目录 一级目录 一级目录 一级目录css代码 * { margin: 0; padding: 0; } a { text-decoration: none; color: black; } a:hover { text-decoration: none; } li { list-style-type: none; }初始效果图 效果图如下 3.接下来在一级目录下添加二级目录 html代码 一级目录 二级目录 二级目录 二级目录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; }实现的效果图为 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。 代码实现效果
全部的html代码 一级目录 二级目录 二级目录 二级目录 一级目录 一级目录 一级目录![span""/span](span"../img/1.jpg"/span)
全部的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; }最终效果图 如果还有什么不明白的，请大家留言，以上所诉，如有错误，也请大家指正。 |
2. 接下来给元素添加样式，让列表横向排列并且变得美观
4.现在要开始实现下拉的效果，有两种方式，第一种是通过display:none将二级目录隐藏后通过:hover去掉隐藏，来达到二级目录隐藏/出现的效果，但是这样会显的很突兀，用户体验不是很好，这里我们使用CSS3中的过渡效果transition来使二级目录达到隐藏/出现的效果，这样会显的交互效果很平滑。
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中，就可以了。
【本文地址】
今日新闻 |
推荐新闻 |