后台管理页面左侧导航栏下拉菜单切换

最新推荐文章于 2023-08-28 17:27:33 发布

@Xiao's blog

最新推荐文章于 2023-08-28 17:27:33 发布

阅读量8k

点赞数 2

分类专栏：前端总结文章标签：后台侧边栏

本文链接：https://blog.csdn.net/wjx666666/article/details/86643066

版权

前端总结专栏收录该内容

13 篇文章 0 订阅

订阅专栏

后台管理页面左侧导航栏

<!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");

    });

小结

写的只是一些基本的功能，还有很多改进的地方，哈哈。

@Xiao's blog

关注

2
点赞
踩
49

收藏

觉得还不错? 一键收藏
5
评论
后台管理页面左侧导航栏下拉菜单切换

后台管理页面左侧导航栏目录效果图html代码css代码js部分小结目录这篇文章主要介绍了js实现的后台左侧管理菜单代码,可实现美观大气的左侧折叠菜单效果,涉及JavaScript基于鼠标事件动态操作页面元素样式变换的技巧,非常具有实用价值,需要的朋友可以参考下效果图这是html+css+js运行出来的页面视图这几天在做一个小项目，整理出来的demo供大家参考。用的知识有：...
复制链接

扫一扫