html css 导航 左右滑动效果代码,HTML+CSS/CSS3实现滑动下拉导航栏
HTML+CSS/CSS3實(shí)現(xiàn)滑動(dòng)下拉導(dǎo)航欄
純css實(shí)現(xiàn)的滑動(dòng)下拉導(dǎo)航欄，超詳細(xì)代碼，以及實(shí)現(xiàn)中遇到的小問題
首先創(chuàng)建一個(gè)列表以及一些標(biāo)簽的全局樣式
html代碼
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代碼
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;
}
實(shí)現(xiàn)的效果圖為
4.現(xiàn)在要開始實(shí)現(xiàn)下拉的效果，有兩種方式，第一種是通過display:none將二級目錄隱藏后通過:hover去掉隱藏，來達(dá)到二級目錄隱藏/出現(xiàn)的效果，但是這樣會(huì)顯的很突兀，用戶體驗(yàn)不是很好，這里我們使用CSS3中的過渡效果transition來使二級目錄達(dá)到隱藏/出現(xiàn)的效果，這樣會(huì)顯的交互效果很平滑。
css代碼
.nav ul li div {
overflow: hidden;/*元素溢出裁剪必須要用在li下的div中，后面會(huì)詳細(xì)介紹原因*/
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設(shè)為0，從而使得div的height有一個(gè)0px～130px的變化，展現(xiàn)出一種下拉的效果，height必須為0，不能為空，如果為空，則div內(nèi)部的元素會(huì)自動(dòng)撐開div，使得div無法隱藏。同時(shí)，div的邊框需要加在：hover中，否則div的邊框無法隱藏，因?yàn)閐iv的邊框處于div外部，如果一個(gè)width為98px的div帶有1px的邊框，那么它實(shí)際上的width為100px，這樣即使div的width為0px，它實(shí)際的寬度卻是2px。
代碼實(shí)現(xiàn)效果
5.以上下拉導(dǎo)航欄的效果就已經(jīng)實(shí)現(xiàn)了，但是用在網(wǎng)頁的制作上還會(huì)存在一些問題，一個(gè)網(wǎng)頁不可能只有一個(gè)導(dǎo)航欄，導(dǎo)航欄的下方通常會(huì)有輪播圖或者其它的內(nèi)容，這個(gè)時(shí)候下拉導(dǎo)航欄就會(huì)出現(xiàn)以下問題。
會(huì)發(fā)現(xiàn)二級目錄沒有辦法出現(xiàn)，因?yàn)槎壞夸洷幌路降膱D片覆蓋，也就是說二級目錄在圖片的后面，存在但是沒有辦法看到，這時(shí)候就需要給li下的div加一個(gè)z-index屬性，讓二級目錄出現(xiàn)在圖片的前面，不被圖片遮擋，而z-index屬性只能用在被定位的元素上，也就是說需要有position：absolute或者position: relative，之前我將overflow: hidden加在了div里，如果加在了ul中，則會(huì)出現(xiàn)下面的效果。
正常來說，li下div為ul的子元素，當(dāng)ul添加了overflow: hidden后，div溢出的的部分應(yīng)該被裁減掉才對，可是這里卻依然顯示，原因是我們要使用z-index，而使用z-index的前提是需要position：absolute或者position: relative，拿absolute來說，是絕對定位，側(cè)面來想添加了該屬性的元素父元素變成了body，而ul是body的子元素，這個(gè)時(shí)候ul是沒有權(quán)限去剪切l(wèi)i下div的溢出的，也就是孫子依賴了爺爺，父親規(guī)定了要溢出剪切，不可行。因此overflow: hidden必須要加在li下的div中，這時(shí)我們在將z-index添加到：hover中，就可以了。
全部的html代碼
全部的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;
}
最終效果圖
如果還有什么不明白的，請大家留言，以上所訴，如有錯(cuò)誤，也請大家指正。
總結(jié)
以上是生活随笔為你收集整理的html css 导航 左右滑动效果代码,HTML+CSS/CSS3实现滑动下拉导航栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取天气数据 (根据天气接口返回的数据)
- 下一篇： 飞凌嵌入式i.MX6Q开发板试用报告