html+css+js左侧导航

最新推荐文章于 2024-08-16 09:49:53 发布

小小1992

最新推荐文章于 2024-08-16 09:49:53 发布

阅读量468

点赞数

分类专栏： css html 文章标签： html css

本文链接：https://blog.csdn.net/u014645827/article/details/125911932

版权

css 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

<!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>111</h2>
<div class="hide">
<h5>111111</h5>
<h5>111111</h5>
<h5>111111</h5>
<h5>111111</h5>
<h5>111111</h5>
<h5>111111</h5>
</div>
</li>
<li class="list">
<h2><i></i>22</h2>
<div class="hide">
<h5>222</h5>
<h5>222</h5>
<h5>222</h5>
<h5>222</h5>
<h5>222</h5>
<h5>222</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>