js+css实现多级垂直横向后台管理左侧导航菜单嗲代码-html代码-BFW代码库

代码语言：html
代码描述：js+css实现多级垂直横向后台管理左侧导航菜单嗲代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/remixicon.css">
    <style>
        .layout {
        min-height:100%;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        position:relative;
        -webkit-box-flex:1;
        -ms-flex-positive:1;
        flex-grow:1
    }
    .layout.has-sidebar {
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-direction:row;
        flex-direction:row
    }
    .layout .header {
        -webkit-transition:width,0.3s;
        transition:width,0.3s;
        height:64px;
        min-height:64px;
        position:relative
    }
    .layout .sidebar {
        width:280px;
        min-width:280px;
        -webkit-transition:width,left,right,0.3s;
        transition:width,left,right,0.3s
    }
    .layout .sidebar.collapsed {
        width:80px;
        min-width:80px
    }
    @media(max-width:480px) {
        .layout .sidebar.break-point-xs {
        position:fixed;
        left:-280px;
        height:100%;
        top:0;
        z-index:100
    }
    .layout .sidebar.break-point-xs.collapsed {
        left:-80px
    }
    .layout .sidebar.break-point-xs.toggled {
        left:0
    }
    .layout .sidebar.break-point-xs.toggled ~ .overlay {
        display:block
    }
    .layout .sidebar.break-point-xs ~ .layout .header {
        width:100%!important;
        -webkit-transition:none;
        transition:none
    }
    }@media(max-width:576px) {
        .layout .sidebar.break-point-sm {
        position:fixed;
        left:-280px;
        height:100%;
        top:0;
        z-index:100
    }
    .layout .sidebar.break-point-sm.collapsed {
        left:-80px
    }
    .layout .sidebar.break-point-sm.toggled {
        left:0
    }
    .layout .sidebar.break-point-sm.toggled ~ .overlay {
        display:block
    }
    .layout .sidebar.break-point-sm ~ .layout .header {
        width:100%!important;
        -webkit-transition:none;
        transition:none
    }
    }@media(max-width:768px) {
        .layout .sidebar.break-point-md {
        position:fixed;
        left:-280px;
        height:100%;
        top:0;
        z-index:100
    }
    .layout .sidebar.break-point-md.collapsed {
        left:-80px
    }
    .layout .sidebar.break-point-md.toggled {
        left:0
    }
    .layout .sidebar.break-point-md.toggled ~ .overlay {
        display:block
    }
    .layout .sidebar.break-point-md ~ .layout .header {
        width:100%!important;
        -webkit-transition:none;
        transition:none
    }
    }@media(max-width:992px) {
        .layout .sidebar.break-point-lg {
        position:fixed;
        left:-280px;
        height:100%;
        top:0;
        z-index:100
    }
    .layout .sidebar.break-point-lg.collapsed {
        left:-80px
    }
    .layout .sidebar.break-point-lg.toggled {
        left:0
    }
    .layout .sidebar.break-point-lg.toggled ~ .overlay {
        display:block
    }
    .layout .sidebar.break-point-lg ~ .layout .header {
        width:100%!important;
        -webkit-transition:none;
        transition:none
    }
    }@media(max-width:1200px) {
        .layout .sidebar.break-point-xl {
        position:fixed;
        left:-280px;
        height:100%;
        top:0;
        z-index:100
    }
    .layout .sidebar.break-point-xl.collapsed {
        left:-80px
    }
    .layout .sidebar.break-point-xl.toggled {
        left:0
    }
    .layout .sidebar.break-point-xl.toggled ~ .overlay {
        display:block
    }
    .layout .sidebar.break-point-xl ~ .layout .header {
        width:100%!important;
        -webkit-transition:none;
        transition:none
    }
    }@media(max-width:1600px) {
        .layout .sidebar.break-point-xxl {
        position:fixed;
        left:-280px;
        height:100%;
        top:0;
        z-index:100
    }
    .layout .sidebar.break-point-xxl.collapsed {
        left:-80px
    }
    .layout .sidebar.break-point-xxl.toggled {
        left:0
    }
    .layout .sidebar.break-point-xxl.toggled ~ .overlay {
        display:block
    }
    .layout .sidebar.break-point-xxl ~ .layout .header {
        width:100%!important;
        -webkit-transition:none;
        transition:none
    }
    }.layout .footer {
        height:64px;
        min-height:64px
    }
    .layout .content {
        -webkit-box-flex:1;
        -ms-flex-positive:1;
        flex-grow:1
    }
    .layout .overlay {
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background-color:rgba(0,0,0,0.3);
        z-index:99;
        display:none
    }
    .layout .sidebar-toggler {
        display:none
    }
    @media(max-width:480px) {
        .layout .sidebar-toggler.break-point-xs {
        display:initial
    }
    }@media(max-width:576px) {
        .layout .sidebar-toggler.break-point-sm {
        display:initial
    }
    }@media(max-width:768px) {
        .layout .sidebar-toggler.break-point-md {
        display:initial
    }
    }@media(max-width:992px) {
        .layout .sidebar-toggler.break-point-lg {
        display:initial
    }
    }@media(max-width:1200px) {
        .layout .sidebar-toggler.break-point-xl {
        display:initial
    }
    }@media(max-width:1600px) {
        .layout .sidebar-toggler.break-point-xxl {
        display:initial
    }
    }.layout.fixed-sidebar {
        height:100%
    }
    .layout.fixed-sidebar .sidebar {
        height:100%;
        overflow:auto
    }
    .layout.fixed-sidebar .sidebar ~ .layout {
        height:100%;
        overflow:auto
    }
    .layout.fixed-header .header {
        position:fixed;
        width:100%;
        z-index:2
    }
    .layout.fixed-header .header ~ .layout,.layout.fixed-header .header ~ .content {
        margin-top:64px
    }
    .layout.fixed-header.fixed-sidebar .header {
        width:calc(100% - 280px)
    }
    .layout.fixed-header.fixed-sidebar .sidebar.collapsed ~ .layout .header {
        width:calc(100% - 80px)
    }
    .layout.rtl {
        direction:rtl
    }
    @media(max-width:480px) {
        .layout.rtl .sidebar.break-point-xs {
        left:auto;
        right:-280px
    }
    .layout.rtl .sidebar.break-point-xs.collapsed {
        left:auto;
        right:-80px
    }
    .layout.rtl .sidebar.break-point-xs.toggled {
        left:auto;
        right:0
    }
    }@media(max-width:576px) {
        .layout.rtl .sidebar.break-point-sm {
        left:auto;
        right:-280px
    }
    .layout.rtl .sidebar.break-point-sm.collapsed {
        left:auto;
        right:-80px
    }
    .layout.rtl .sidebar.break-point-sm.toggled {
        left:auto;
        right:0
    }
    }@media(max-width:768px) {
        .layout.rtl .sidebar.break-point-md {
        left:auto;
        right:-280px
    }
    .layout.rtl .sidebar.break-point-md.collapsed {
        left:auto;
        right:-80px
    }
    .layout.rtl .sidebar.break-point-md.toggled {
        left:auto;
        right:0
    }
    }@media(max-width:992px) {
        .layout.rtl .sidebar.break-point-lg {
        left:auto;
        right:-280px
    }
    .layout.rtl .sidebar.break-point-lg.collapsed {
        left:auto;
        right:-80px
    }
    .layout.rtl .sidebar.break-point-lg.toggled {
        left:auto;
        right:0
    }
    }@media(max-width:1200px) {
        .layout.rtl .sidebar.break-point-xl {
        left:auto;
        right:-280px
    }
    .layout.rtl .sidebar.break-point-xl.collapsed {
        left:auto;
        right:-80px
    }
    .layout.rtl .sidebar.break-point-xl.toggled {
        left:auto;
        right:0
    }
    }@media(max-width:1600px) {
        .layout.rtl .sidebar.break-point-xxl {
        left:auto;
        right:-280px
    }
    .layout.rtl .sidebar.break-point-xxl.collapsed {
        left:auto;
        right:-80px
    }
    .layout.rtl .sidebar.break-point-xxl.toggled {
        left:auto;
        right:0
    }
    }.layout {
        z-index:1
    }
    .layout .header {
        box-shadow:1px 1px 4px #9aa0b9;
        display:flex;
        align-items:center;
        padding:20px
    }
    .layout .content {
        padding:20px;
        display:flex;
        flex-direction:column
    }
    .layout .footer {
        text-align:center;
        margin-top:auto;
        margin-bottom:20px;
        padding:20px
    }
    .layout.rtl .header {
        box-shadow:-1px 1px 4px #9aa0b9
    }
    .sidebar {
        color:#b3b8d4;
        overflow-x:hidden!important;
        position:relative;
        background-color:#0c1e35
    }
    .sidebar .image-wrapper {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        opacity:.2;
        z-index:1;
        display:none
    }
    .sidebar .image-wrapper>img {
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center
    }
    .sidebar.has-bg-image .image-wrapper {
        display:block
    }
    .sidebar .sidebar-layout {
        height:100%;
        display:flex;
        flex-direction:column;
        position:relative;
        z-index:2
    }
    .sidebar .sidebar-layout .sidebar-header {
        height:64px;
        min-height:64px;
        display:flex;
        align-items:center;
        padding:0 20px;
        border-bottom:1px solid rgba(83,93,125,0.3)
    }
    .sidebar .sidebar-layout .sidebar-header>span {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis
    }
    .sidebar .sidebar-layout .sidebar-content {
        flex-grow:1;
        padding:10px 0
    }
    .sidebar .sidebar-layout .sidebar-footer {
        height:64px;
        min-height:64px;
        display:flex;
        align-items:center;
        border-top:1px solid rgba(83,93,125,0.3);
        padding:0 20px
    }
    .sidebar .sidebar-layout .sidebar-footer>span {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis
    }
    @keyframes swing {
        0%,30%,50%,70%,100% {
        transform:rotate(0deg)
    }
    10% {
        transform:rotate(10deg)
    }
    40% {
        transform:rotate(-10deg)
    }
    60% {
        transform:rotate(5deg)
    }
    80% {
        transform:rotate(-5deg)
    }
    }.layout .sidebar .menu ul {
        list-style-type:none;
        padding:0;
        margin:0
    }
    .layout .sidebar .menu .menu-item a {
        display:flex;
        align-items:center;
        height:50px;
        padding:0 20px;
        color:#b3b8d4
    }
    .layout .sidebar .menu .menu-item a .menu-icon {
        font-size:1.2rem;
        width:35px;
        min-width:35px;
        height:35px;
        line-height:35px;
        text-align:center;
        display:inline-block;
        margin-right:10px;
        border-radius:2px;
        transition:color .3s
    }
    .layout .sidebar .menu .menu-item a .menu-icon i {
        display:inline-block
    }
    .layout .sidebar .menu .menu-item a .menu-title {
        font-size:.9rem;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        flex-grow:1;
        transition:color .3s
    }
    .layout .sidebar .menu .menu-item a .menu-prefix,.layout .sidebar .menu .menu-item a .menu-suffix {
        display:inline-block;
        padding:5px;
        opacity:1;
        transition:opacity .3s
    }
    .layout .sidebar .menu .menu-item a:hover .menu-title {
        color:#dee2ec
    }
    .layout .sidebar .menu .menu-item a:hover .menu-icon {
        color:#dee2ec
    }
    .layout .sidebar .menu .menu-item a:hover .menu-icon i {
        animation:swing ease-in-out .5s 1 alternate
    }
    .layout .sidebar .menu .menu-item a:hover::after {
        border-color:#dee2ec!important
    }
    .layout .sidebar .menu .menu-item.sub-menu {
        position:relative
    }
    .layout .sidebar .menu .menu-item.sub-menu>a::after {
        content:"";
        transition:transform .3s;
        border-right:2px solid currentcolor;
        border-bottom:2px solid currentcolor;
        width:5px;
        height:5px;
        transform:rota.........完整代码请登录后点击上方下载按钮下载查看