css实现左侧可折叠收缩边栏菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现左侧可折叠收缩边栏菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&amp;display=swap'>
  
<style>
* {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}
:root {
        --hue: 223;
        --hue2: 13;
        --bg: hsl(var(--hue),10%,90%);
        --fg: hsl(var(--hue),10%,10%);
        --primary: hsl(var(--hue),90%,55%);
        --red: hsl(var(--hue2),90%,55%);
        --trans-dur: 0.3s;
        font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body,
button,
input {
        font: 1em/1.5 "DM Sans", sans-serif;
}
body {
        background-color: var(--bg);
        color: var(--fg);
        height: 100vh;
        transition:
                background-color var(--trans-dur),
                color var(--trans-dur);
}
button {
        -webkit-appearance: none;
        appearance: none;
}
.nav {
        background-color: hsl(0,0%,100%);
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100%;
        width: 16em;
        transition:
                background-color var(--trans-dur),
                width var(--trans-dur) ease-in-out;
}
.nav__main {
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 2.5em 1.75em;
        width: inherit;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: 8px;
        scrollbar-color: hsla(0,0%,0%,0.2) transparent;
}
.nav__main::-webkit-scrollbar {
        width: 8px;
}
.nav__main::-webkit-scrollbar-track {
        background: transparent;
}
.nav__main::-webkit-scrollbar-thumb {
        background-color: hsla(0,0%,0%,0.2);
        border-radius: 4px;
}
.nav__main:hover {
        overflow-y: auto;
}
.nav__bottom {
        background-color: inherit;
        box-shadow: 0 1px 0 hsl(var(--hue),10%,80%) inset;
        padding: 1em 1.75em;
        transition: box-shadow var(--trans-dur);
}
.nav__heading {
        color: hsl(var(--hue),10%,45%);
        display: block;
        font-size: 0.75em;
        line-height: 1;
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        transition: color var(--trans-dur);
}
.nav__heading-text {
        display: inline-block;
        transform: translateX(0.75em);
        transition: transform var(--trans-dur) ease-in-out;
}
.nav__items {
        list-style: none;
        margin: 0 0 3em 0;
}
.nav__items:last-child {
        margin-bottom: 0;
}
.nav__item-box {
        background-color: hsla(var(--hue),90%,55%,0);
        border-radius: 0.75em;
        color: hsl(var(--hue),20%,55%);
        display: flex;
        align-items: center;
        padding: 0.75em;
        text-align: left;
        text-decoration: none;
        transition:
                background-color var(--trans-dur) ease-in-out,
                color var(--trans-dur),
                width var(--trans-dur) ease-in-out;
        width: 12.5em;
        min-width: 3em;
}
.nav__item-box:focus,
.nav__item-box:hover {
        background-color: hsla(var(--hue),90%,55%,0.1);
        color: var(--primary);
}
.nav__item-box:focus {
        outline: transparent;
}
.nav__item-icon,
.nav__item-icon svg {
        display: block;
        width: 1.5em;
        height: 1.5em;
}
.nav__item-icon {
        flex-shrink: 0;
        position: relative;
        text-align: center;
        transition: transform var(--trans-dur) ease-in-out;
}
.nav__item-icon--badge:before {
        background-color: var(--primary);
        border-radius: 50%;
        box-shadow: 0 0 0 0.1em hsl(0,0%,100%);
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0.5em;
        height: 0.5em;
        transform: scale(0);
        transition:
                box-shadow var(--trans-dur),
                transform var(--trans-dur) ease-in-out;
}
.nav__item-text {
        margin-left: 0.75em;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        transition:
                opacity var(--trans-dur) ease-in-out,
                width var(--trans-dur) ease-in-out;
}
.nav__item-badge {
        background-color: hsla(var(--hue),90%,55%,0.1);
        border-radius: 0.75rem;
        color: var(--primary);
        font-size: 0.75em;
        line-height: 1;
        margin-left: 0.75rem;
        padding: 0.125rem 0.5rem;
        transition:
                background-color var(--trans-dur),
                color var(--trans-dur);
}
.nav__item-box--red .nav__item-badge {
        background-color: hsla(var(--hue2),90%,55%,0.1);
        color: var(--red);
}
.nav__item-box--red .nav__item-icon--badge:before {
        background-color: var(--red);
}
.nav__logo {
        background-color: var(--primary);
        border-radius: 0.75em;
        color: hsl(0,0%,100%);
        display: flex;
        margin-bottom: 2.5em;
        width: 3em;
        height: 3em;
        transform: translateX(0.75em);
        transition:
                background-color var(--trans-dur),
                color var(--trans-dur),
                transform var(--trans-dur) ease-in-out;
}
.nav__logo svg {
        display: block;
        margin: auto;
        width: 2em;
        height: 2em;
}
.nav[data-expanded="false"] {
        width: 6.5em;
}
.nav[data-expanded="false"] .nav__heading-text {
        transform: translateX(calc(2em - 50%));
}
.nav[data-expanded="false"] .nav__item-box {
        width: 3em;
}
.nav[data-expanded="false"] .nav__item-icon--badge:before {
        transform: scale(1);
}
.nav[data-expanded="false"] .nav__item-text {
        opacity: 0;
        width: 0;
}
.nav[data-expanded="false"] .nav__logo {
        transform: translateX(0);
}
.nav[data-expanded="false"] [data-expand] .nav__item-icon {
        transform: rotate(180deg);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
        :root {
                --bg: hsl(var(--hue),10%,20%);
                --fg: hsl(var(--hue),10%,90%);
        }
        .nav {
                background-color: hsl(var(--hue),10%,10%);
        }
        .nav__main {
                scrollbar-color: hsla(0,0%,100%,0.2) transparent;
        }
        .nav__main::-webkit-scrollbar-thumb {
                background-color: hsla(0,0%,100%,0.2);
        }
        .nav__bottom {
                box-shadow: 0 1px 0 hsl(var(--hue),10%,30%) inset;
        }
        .nav__heading {
                color: hsl(var(--hue),10%,65%);
        }
        .nav__item-box {
                background-color: hsla(0,0%,100%,0);
                color: hsl(var(--hue),20%,75%);
        }
        .nav__item-box:focus,
        .nav__item-box:hover {
                background-color: hsla(0,0%,100%,0.1);
                color: hsl(0,0%,100%);
        }
        .nav__item-icon--badge:before {
                box-shadow: 0 0 0 0.1em hsl(var(--hue),10%,10%);
        }
        .nav__item-badge {
                background-color: hsl(var(--hue),90%,55%);
                color: hsl(0,0%,100%);
        }
        .nav__item-box--red .nav__item-badge {
                background-color: hsl(var(--hue2),90%,55%);
                color: hsl(0,0%,100%);
        }
        .nav__logo {
                background-color: hsl(0,0%,100%);
                color: var(--primary);
        }
}
</style>




</head>

<body>
  <svg display="none">
        <symbol id="app" viewBox="0 0 24 24">
                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
                        <path d="M9,11.969V5c0-1.657,1.343-3,3-3s3,1.343,3,3v1.003"/>
                        <path d="M15,12.002v6.998c0,1.657-1.343,3-3,3s-3-1.343-3-3v-1.015"/>
                        <path d="M12,15H4.992c-1.652,0-2.992-1.343-2.992-3s1.34-3,2.992-3h1.002"/>
                        <path d="M12,9h6.994c1.66,0,3.006,1.343,3.006,3s-1.346,3-3.006,3h-.961"/>
                </g>
        </symbol>
        <symbol id="dashboard" viewBox="0 0 24 24".........完整代码请登录后点击上方下载按钮下载查看