html css 导航 左右滑动效果代码,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;
}
初始效果圖
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;
}
實現的效果圖為
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代碼
全部的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;
}
最終效果圖
如果還有什么不明白的，請大家留言，以上所訴，如有錯誤，也請大家指正。
總結
以上是生活随笔為你收集整理的html css 导航 左右滑动效果代码,HTML+CSS/CSS3实现滑动下拉导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取天气数据 (根据天气接口返回的数据)
- 下一篇： 超声系统前端理论与模拟仿真