您的位置：首页 > Web前端 > CSS

Html+CSS+JS实现侧边下拉导航栏（web前端开发基础）

2018-10-20 02:43 1586 查看

该代码源自我昨天在B站看的一个视频课（av27073032），造福群众，不喜勿喷。

HTML源代码（建议用Chrome浏览器打开，兼容性强，不易出现乱码现象）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>侧边下拉导航栏</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.wrap{
width: 260px;
height: 100%;
background-color: #363a45;
}
.header{
width: 100%;
height: 65px;
background-color: #44495a;
font-size: 24px;
color: #fff;
text-align: center;
line-height: 65px;
}
.nav{
width:250px;
margin: 10px 5px 0;
}
.list{
margin-bottom: 5px;
}
.list h2{
position: relative;
padding: 15px 0;
background-color: #3889d4;
text-align: center;
font-size: 16px;
color: #fff;
transition: .5s;
}
.list h2.on{
background-color: #393c4a;
}
.list i{
position: absolute;
right: 10px;
top: 16px;
border: 8px solid transparent;
border-left-color: #fff;/*triangle*/
transform:rotate(0deg);
transform-origin: 1px 8px;
transition: .5s;
}
.list i.on{
transform:rotate(90deg);
}
.hide{
overflow: hidden;
height: 0;
transition: .5s;
}
.hide h5{
padding: 10px 0;
background-color: #282c3a;
text-align: center;
color:#fff;
border-bottom:#42495d;
}
</style>
<body>
<div class="wrap">
<div class="header">国内各个景点</div>
<div class="nav">
<ul>
<li class="list">
<h2><i></i>北京景点</h2>
<div class="hide">
<h5>故宫</h5>
<h5>圆明园</h5>
<h5>天坛</h5>
<h5>长城</h5>
<h5>天安门</h5>
<h5>雍和宫</h5>
</div>
</li>
<li class="list">
<h2><i></i>南京景点</h2>
<div class="hide">
<h5>夫子庙</h5>
<h5>南京总统府</h5>
<h5>明孝陵</h5>
<h5>长江大桥</h5>
<h5>南京博物院</h5>
<h5>雨花台</h5>
</div>
</li>
<li class="list">
<h2><i></i>西安景点</h2>
<div class="hide">
<h5>钟楼</h5>
<h5>秦皇陵</h5>
<h5>华清池</h5>
<h5>大唐芙蓉园</h5>
<h5>秦岭野生动物园</h5>
<h5>樱花广场</h5>
</div>
</li>
<li class="list">
<h2><i></i>重庆景点</h2>
<div class="hide">
<h5>洪崖洞</h5>
<h5>丰都鬼城</h5>
<h5>金刀峡</h5>
<h5>重庆仙女山</h5>
<h5>白公馆</h5>
<h5>三峡博物馆</h5>
</div>
</li>
</ul>
</div>
</div>
<script>
(function () {
var oList = document.querySelectorAll('.list h2'),
oHide = document.querySelectorAll('.hide'),
oIcon = document.querySelectorAll('.list i'),
lastIndex = 0;
for(var i=0;i<oList.length;i++){
oList[i].index = i;//自定义属性
oList[i].isClick = false;
oList[i].initHeight = oHide[i].clientHeight;
oHide[i].style.height = '0';
oList[i].onclick = function () {
if(this.isClick){
oHide[this.index].style.height = '0';
oIcon[this.index].className = '';
oList[this.index].className = '';
oList[this.index].isClick = false;
}
else{
oHide[lastIndex].style.height = '0';
oIcon[lastIndex].className = '';
oList[lastIndex].className = '';
oHide[this.index].style.height = '220px';
oIcon[this.index].className = 'on';
oList[this.index].className = 'on';
oList[lastIndex].isClick = false;
oList[this.index].isClick = true;
lastIndex = this.index;
}
}
}
})();
</script>
</body>
</html>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航