废话少说，直接上代码，要求装了bootstrap运行需要的js和css文件
先来效果图：
这是html界面
<body>
<!-- 左边导航栏 开始-->
<div id="menu">
<!--显示菜单-->
<div id="open">
<div class="navH">
SHEIN
</div>
<div class="navBox">
<ul>
<li>
<h2 class="obtain">一级菜单1<i></i></h2>
<div class="secondary">
<a href="#">
<h3>二级级菜单</h3></a>
<a href="/bills/add">
<h3>二级菜单</h3></a>
</div>
</li>
<li>
<h2 class="obtain">一级菜单2<i></i></h2>
<div class="secondary">
<a href="#">
<h3>二级级菜单</h3></a>
<a href="/memo/romwe">
<h3>二级级菜单</h3></a>
</div>
</li>
<li>
<h2 class="obtain">一级菜单3<i></i></h2>
<div class="secondary">
<a href="#">
<h3>二级级菜单</h3></a>
<a href="/act/calendar">
<h3>二级级菜单</h3></a>
</div>
</li>
<li>
<h2 class="obtain">一级菜单3<i></i></h2>
<div class="secondary">
<a href="/accts">
<h3>二级级菜单</h3></a>
<a href="#">
<h3>二级级菜单</h3></a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 左边导航栏 结束-->
<!-- 右边内容 开始-->
<div id="rightContent">
<!-- 右边内容-->
</div>
</body>下面是他的全局样式
<style type="text/css">
body {
font-size: 13px !important;
}
.navbar-inverse {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#rightContent {
width: 91%;
float: left;
}
#menu {
cursor: default;
overflow: hidden;
height: 100%;
width: 9%;
float: left;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#menu #ensconce h2 {
cursor: pointer;
color: #fff;
font-size: 0.24rem;
line-height: 0.5rem;
width: 100%;
position: absolute;
top: 35%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(0%, -50%);
}
#menu #ensconce h2 img {
width: 52%;
}
#menu #open {
/*显示菜单样式*/
width: auto;
height: 100%;
background-color: #363a45;
padding-bottom: 0.1rem;
box-sizing: border-box;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
}
#menu #open .navH {
height: 50px;
background-color: #44495a;
line-height: 0.6rem;
text-align: center;
font-size: 0.2rem;
color: #fff;
position: relative;
box-sizing: border-box;
}
#menu #open .navH span {
position: absolute;
top: 49%;
right: 0;
padding: 0 0.15rem;
cursor: pointer;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
display: inline-block;
}
#menu #open .navH span .obscure {
width: 0.24rem;
}
#menu #open .navBox {
height: 100%;
overflow-y: auto;
padding-left: 0.05rem;
padding-right: 0.07rem;
margin-top: 0.1rem;
}
#menu #open .navBox ul li {
background-color: #393c4a;
cursor: pointer;
margin-bottom: 4px;
}
#menu #open .navBox ul li .obtain {
background-color: #3889D4;
}
#menu #open .navBox ul li .obtain:hover {
background-color: #3D8332;
}
#menu #open .navBox ul li h2 {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-size: 0.15rem;
padding: 0.15rem 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li h2 i {
position: absolute;
top: 50%;
right: 0.15rem;
border-top: 0.07rem transparent dashed;
border-left: 0.07rem solid #fff;
border-right: 0.07rem transparent dashed;
border-bottom: 0.07rem transparent dashed;
display: inline-block;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
-o-transition: -o-transform 0.6s ease;
-ms-transition: -ms-transform 0.6s ease;
transform-origin: 4px 3px;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
#menu #open .navBox ul li h2 .arrowRot {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#menu #open .navBox ul li .secondary {
overflow: hidden;
height: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li .secondary h3 {
padding: 0.1rem 0;
text-align: center;
font-size: 0.13rem;
background-color: #282c3a;
color: #ffffff;
border-bottom: 0.8px solid #42495d;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
#menu #open .navBox ul li .secondary h3:hover {
background-color: #1acbfc;
}
#menu #open .navBox ul li .secondary .seconFocus {
background-color: #1acbfc;
-webkit-box-shadow: 3px 3px 3px #aa8c51;
-moz-box-shadow: 3px 3px 3px #aa8c51;
box-shadow: 3px 3px 3px #aa8c51;
}
</style>下面是他的js文件
<script type="text/javascript">
window.onload = function () {
var flag = true;
var liC = document.querySelectorAll(".navBox li h2");
// 主导航nav点击事件
for (var i = 0; i < liC.length; i++) {
liC[i].onclick = function () {
if (flag) {
// 节流阀
flag = false;
setTimeout(function () {
flag = true;
}, 500)
// 自点
if (this.className === "obFocus") {
this.querySelector("i").classList.remove("arrowRot");
getNext(this).style.height = "0";
this.classList.add("obtain");
this.classList.remove("obFocus");
return
}
var sec = getNext(this);
var sib = siblings(sec.parentNode);
var otherArr = [];
var arrowClass = [];
// 排他 secondary arrowRot obFocus
for (var j = 0; j < sib.length; j++) {
var sibSec = sib[j].getElementsByTagName('*');
for (var i = 0; i < sibSec.length; i++) {
if (sibSec[i].className == "secondary") {
otherArr.push(sibSec[i])
}
if (sibSec[i].className == "arrowRot") {
arrowClass.push(sibSec[i])
}
if (sibSec[i].className == "obFocus") {
sibSec[i].classList.remove("obFocus");
sibSec[i].classList.add("obtain");
}
}
}
for (var i = 0; i < otherArr.length; i++) {
otherArr[i].style.height = "0";
}
if (arrowClass[0]) {
arrowClass[0].classList.remove("arrowRot");
}
// 留自己
sec.style.height = 'auto';
this.getElementsByTagName("i")[0].classList.add("arrowRot");
this.classList.remove("obtain");
this.classList.add("obFocus");
}
}
}
// 子导航点击事件
var seconC = document.querySelectorAll(".secondary h3")
for (var i = 0; i < seconC.length; i++) {
seconC[i].onclick = function () {
for (var i = 0; i < seconC.length; i++) {
seconC[i].classList.remove("seconFocus");
}
this.classList.add("seconFocus");
}
}
}
function getByClass(clsName, parent) {
var oParent = parent ? document.getElementById(parent) : document,
boxArr = new Array(),
oElements = oParent.getElementsByTagName('*');
for (var i = 0; i < oElements.length; i++) {
if (oElements[i].className == clsName) {
boxArr.push(oElements[i]);
}
}
return boxArr;
}
// 获取下一个兄弟元素
function getNext(node) {
if (!node.nextSibling) return null;
var nextNode = node.nextSibling;
if (nextNode.nodeType == 1) {
return nextNode;
}
return getNext(node.nextSibling);
}
// 获取除了自己以外的其他亲兄弟元素
function siblings(elem) {
var r = [];
var n = elem.parentNode.firstChild;
for (; n; n = n.nextSibling) {
if (n.nodeType === 1 && n !== elem) {
r.push(n);
}
}
return r;
}
</script>