jq简单实现小屏左侧导航
内容概要：
-引入文件bootstrap、jquery
文章内容主要实现简单的左侧导航（一级二级）功能实现，作为学习记录与参考**，文中多有不足，请多指正，欢迎交流
头部文件引用：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/left.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
HTML部分：
<body>
<div class="btn">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="leftmenu hidden-lg hidden-md">
<div class="leftmenuicon"></div>
<ul class="leftfirul">
<li class="leftfir"><a href="">第一导航</a>
<ul class="leftulsec">
<li class="leftsec"><a href="#">二级导航</a></li>
<li class="leftsec"><a href="#">二级导航</a></li>
<li class="leftsec"><a href="#">二级导航</a></li>
</ul>
</li>
<li class="leftfir"><a href="">第一导航</a>
<ul class="leftulsec">
<li class="leftsec"><a href="#">二级导航</a></li>
<li class="leftsec"><a href="#">二级导航</a></li>
<li class="leftsec"><a href="#">二级导航</a></li>
</ul>
</li>
<li class="leftfir"><a href="">第一导航</a></li>
</ul>
</div>
</body>
JQ代码块：
<script>
$(.btn).click(function() {
if ($(.leftmenu).is(:hidden)) {
$(.leftmenu).show().css({
"left": "0",
"transition": "all .2s"
});
} else {
$(.leftmenu).hide(200).css("left", "-200px");
}
})
$(.leftfir).click(function() {
$(this).children("ul").slideToggle(100);
});
</script>
left.css
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.btn {
width: 45px;
height: 45px;
border: 1px solid #a4a4a4;
border-radius: 5px;
text-align: center;
position: absolute;
right: 0;
}
.line {
display: block;
width: 95%;
border-top: 2px solid #a4a4a4;
margin: 6px auto;
text-align: center;
}
.btn:hover {
border: 1px solid #a4a4a4;
cursor: pointer;
}
.btn:hover .line:first-child {
transition: all .2s ease;
width: 16px;
text-align: center;
cursor: pointer;
}
.btn:hover .line:nth-child(2) {
width: 25px;
text-align: center;
transition: all .2s ease;
cursor: pointer;
}
.btn:hover .line:last-child {
transition: all .2s ease;
text-align: center;
width: 16px;
cursor: pointer;
}
.leftmenu {
width: 130px;
height: 100%;
background: lightsteelblue;
z-index: 999;
position: fixed;
left: -200px;
}
.leftfirul {
width: 100%;
margin: 15px 3px;
}
.leftfirul .leftfir {
margin: 10px 0;
text-align: left;
}
.leftulsec {
width: 100%;
}
.leftulsec .leftsec {
text-align: center;
margin: 5px 0;
}
.leftsec a {
font-size: 15px;
color: #f7f7f7;
}
.leftfir a {
color: white;
font-size: 15px;
}
.leftulsec {
display: none;
}
效果展示： 功能简单代码不多，还有需要优化的地方，欢迎交流！