目录
这篇文章主要介绍了js实现的后台左侧管理菜单代码,可实现美观大气的左侧折叠菜单效果,涉及JavaScript基于鼠标事件动态操作页面元素样式变换的技巧,非常具有实用价值,需要的朋友可以参考下
效果图
这是html+css+js运行出来的页面视图
这几天在做一个小项目,整理出来的demo供大家参考。用的知识有:
- html — 引入.ico、图标、iframe框架 ;
- JS— this用法、jQurey里的css(),on()方法、siblings()、parent()、children()方法以及滑动动画slideToggle()、slideUp()、slideDown() 语法;
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台</title>
<link rel="stylesheet" href="css/adminIndex.css">
<link rel="shortcut icon"type="image/x-icon" href="images/favicon.ico"media="screen" />
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<script src="js/jquery.js"></script>
<script src="js/adminIndex.js"></script>
</head>
<body>
<div class="roof">
<div class="left">
<img src="images/logo.jpg" alt="" class="logo">
<img src="images/tttle2.png" alt="" class="tttle2">
</div>
<div class="right">
<div class="user">欢迎 admin</div>
<div class="back" style="padding: 0 35px;"><a href="">返回首页</a></div>
<div class="back"><a href="" class="tuichu">退出</a></div>
</div>
</div>
<!--左侧侧边栏-->
<div class="side-left">
<div>
<span><i class="fa fa-address-book-o" aria-hidden="true"></i></span>
<div class="list_one addColor" id="src5">注册信息</div>
</div>
<div>
<span> <i class="fa fa-balance-scale" aria-hidden="true"></i></span>
<div class="list_one" id="one">成果服务</div>
<div id="jiantou1"></div>
<div class="list_two">
<div class="addColor" id="src1">成果发布</div>
<div class="addColor" id="src2">成果发布管理</div>
</div>
</div>
<div>
<span><i class="fa fa-telegram" aria-hidden="true"></i></span>
<div class="list_one" id="two">供需服务</div>
<div id="jiantou2"></div>
<div class="list_two">
<div class="addColor" id="src3">供需发布</div>
<div class="addColor" id="src4">供需发布管理</div>
</div>
</div>
<div>
<span> <i class="fa fa-user-circle-o" aria-hidden="true"></i></span>
<div class="list_one" id="two">专家服务</div>
<div id="jiantou2"></div>
<div class="list_two">
<div class="addColor" id="src3">专家信息</div>
</div>
</div>
</div>
<!--右侧内容-->
<div class="frame-div">
<iframe src="" frameborder="0" class="ifm" scrolling="no"></iframe>
</div>
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑";
overflow-x:auto ;
overflow-y:hidden;
}
.roof{
width: 100%;
height: 60px;
margin: 0 auto;
background-color: #20222A;
overflow: hidden;
font-family: "宋体";
overflow: hidden;
font-size: 20px;
}
.left {
float: left;
margin-left: 45px;
}
.logo{
width:50px;
height:50px;
display: inline-block;
}
.tttle2{
height:60px;
display: inline-block;
}
.left>span{
display: inline-block;
color: #fff;
vertical-align: text-bottom;
font-size: 30px;
}
.right{
float: right;
margin-right: 15px;
line-height: 60px;
font-size: 16px;
color: #fff;
opacity: 0.7;
}
.user{
display: inline-block;
cursor: pointer;
}
.back{
display: inline-block;
}
.back>a{
color: #fff;
text-decoration: none;
}
.side-left{
top: 60px;
left: 0;
bottom: 0;
width: 200px;
background-color: #20222A;
position: absolute;
}
/*左侧侧边栏样式*/
.list_one{
/*width: 200px;*/
height: 45px;
padding-left: 49px;
border-left: solid 6px #393D49;
text-align: left;
line-height: 45px;
color: darkgray;
}
.list_one:hover{
color: white;
border-left: solid 6px #009688;
cursor: pointer;
}
.list_two{
width: 200px;
height: auto;
text-align: left;
line-height: 45px;
color: darkgray;
background-color: #282B33;
display: none;
}
.list_two>div{
width: 150px;
height: 45px;
padding-left: 50px;
}
.list_two>div:hover{
color:darkgray;
cursor: pointer;
}
.thisColor{
background-color: #009688;
}
.another{
background-color: #393D49;
}
#mr{
margin-right: 10px;
opacity: 0.7;
margin-left: 50px;
transition: all .3s;
}
.frame-div {
position: absolute;
left: 200px;
top: 60px;
right: 0;
bottom: 0;
}
.ifm{
width: 100%;
height: 100%;
}
.tuichu{
padding:10px;
background: #41A809;
border-radius: 5px;
}
.tuichu:hover{
box-shadow: 0 0 1px 1px #cccccc;
}
js部分
//设置高亮
$(".addColor").on('click',function () {
$(".addColor").css("backgroundColor","#282B33");
$(this).css("backgroundColor","#009688");
})
//设置滑动
$(".list_one").click(function(){
$(this).siblings(".list_two").slideToggle("1s");
$(this).parent().siblings().children(".list_two").slideUp("1s");
});
小结
写的只是一些基本的功能,还有很多改进的地方,哈哈。