js+css实现多级垂直横向后台管理左侧导航菜单嗲代码
代码语言：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:rotate(-45deg)
}
.layout .sidebar .menu .menu-item.sub-menu>.sub-menu-list {
padding-left:20px;
display:none;
overflow:hidden;
z-index:999
}
.layout .sidebar .menu .menu-item.sub-menu.open>a::after {
transform:rotate(45deg)
}
.layout .sidebar .menu .menu-item.active>a .menu-title {
color:#dee2ec
}
.layout .sidebar .menu .menu-item.active>a::after {
border-color:#dee2ec
}
.layout .sidebar .menu .menu-item.active>a .menu-icon {
color:#dee2ec
}
.layout .sidebar .menu>ul>.sub-menu>.sub-menu-list {
background-color:#0b1a2c
}
.layout .sidebar .menu.icon-shape-circle .menu-item a .menu-icon,.layout .sidebar .menu.icon-shape-rounded .menu-item a .menu-icon,.layout .sidebar .menu.icon-shape-square .menu-item a .menu-icon {
background-color:#0b1a2c
}
.layout .sidebar .menu.icon-shape-circle .menu-item a .menu-icon {
border-radius:50%
}
.layout .sidebar .menu.icon-shape-rounded .menu-item a .menu-icon {
border-radius:4px
}
.layout .sidebar .menu.icon-shape-square .menu-item a .menu-icon {
border-radius:0
}
.layout .sidebar:not(.collapsed) .menu>ul>.menu-item.sub-menu>.sub-menu-list {
visibility:visible!important;
position:static!important;
transform:translate(0,0)!important
}
.layout .sidebar.collapsed .menu>ul>.menu-item>a .menu-prefix,.layout .sidebar.collapsed .menu>ul>.menu-item>a .menu-suffix {
opacity:0
}
.layout .sidebar.collapsed .menu>ul>.menu-item.sub-menu>a::after {
content:"";
width:5px;
height:5px;
background-color:currentcolor;
border-radius:50%;
display:inline-block;
position:absolute;
right:10px;
top:50%;
border:0;
transform:translateY(-50%)
}
.layout .sidebar.collapsed .menu>ul>.menu-item.sub-menu>a:hover::after {
background-color:#dee2ec
}
.layout .sidebar.collapsed .menu>ul>.menu-item.sub-menu>.sub-menu-list {
transition:none!important;
width:200px;
margin-left:3px!important;
border-radius:4px;
display:block!important
}
.layout .sidebar.collapsed .menu>ul>.menu-item.active>a::after {
background-color:#dee2ec
}
.layout .sidebar.has-bg-image .menu.icon-shape-circle .menu-item a .menu-icon,.layout .sidebar.has-bg-image .menu.icon-shape-rounded .menu-item a .menu-icon,.layout .sidebar.has-bg-image .menu.icon-shape-square .menu-item a .menu-icon {
background-color:rgba(11,26,44,0.6)
}
.layout .sidebar.has-bg-image:not(.collapsed) .menu>ul>.sub-menu>.sub-menu-list {
background-color:rgba(11,26,44,0.6)
}
.layout.rtl .sidebar .menu .menu-item a .menu-icon {
margin-left:10px;
margin-right:0
}
.layout.rtl .sidebar .menu .menu-item.sub-menu>a::after {
transform:rotate(135deg)
}
.layout.rtl .sidebar .menu .menu-item.sub-menu>.sub-menu-list {
padding-left:0;
padding-right:20px
}
.layout.rtl .sidebar .menu .menu-item.sub-menu.open>a::after {
transform:rotate(45deg)
}
.layout.rtl .sidebar.collapsed .menu>ul>.menu-item.sub-menu a::after {
right:auto;
left:10px
}
.layout.rtl .sidebar.collapsed .menu>ul>.menu-item.sub-menu>.sub-menu-list {
margin-left:-3px!important
}
* {
box-sizing:border-box
}
body {
margin:0;
height:100vh;
font-family:"Roboto",sans-serif;
color:#212529
}
a {
text-decoration:none
}
@media(max-width:992px) {
#btn-collapse {
display:none
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="layout has-sidebar fixed-sidebar fixed-header">
<aside id="sidebar" class="sidebar break-point-lg has-bg-image">
<div class="image-wrapper"><img src="//repo.bfw.wiki/bfwrepo/image/5fd82faab9c8f.png" alt="sidebar background" /></div>
<div class="sidebar-layout">
<div class="sidebar-header"><span style="
text-transform: uppercase;
font-size: 15px;
letter-spacing: 3px;
font-weight: bold;
">Admin</span></div>
<div class="sidebar-content">
<nav class="menu open-current-submenu">
<ul>
<li class="menu-item sub-menu"><a href="#"><span class="menu-icon"><i class="ri-vip-diamond-fill"></i></span><span class="menu-title">Components</span><span class="menu-suffix">🔥</span></a>
<div class="sub-menu-list">
<ul>
<li class="menu-item"><a href="#"><span class="menu-title">Grid</span></a></li>
<li class="menu-item"><a href="#"><span class="menu-title">Layout</span></a></li>
<li class="menu-item sub-menu"><a href="#"><span class="menu-title">Forms</span></a>
<div class="sub-menu-list">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0