svg+css实现可折叠垂直菜单导航条代码-html代码-BFW代码库

代码语言：html
代码描述：svg+css实现可折叠垂直菜单导航条代码，点击右侧按钮宽度可缩小。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); body {
    margin: 0;
    background: url('//repo.bfw.wiki/bfwrepo/image/652f365b334c0.png');
    background-size: cover;
}

* {
    font-family: 'Inter', sans-serif;
}

div#Drob_windows {
    width: 100%;
    height: 12px;
    border-radius: 15px 15px 0 0;
    position: absolute;
    top: 0;
    left: 0;
}

div#Drob_windows_bottom {
    width: 100%;
    height: 12px;
    border-radius: 0 0 15px 15px;
    position: absolute;
    bottom: 0;
    left: 0;
}

div#Drob_windows_right {
    width: 12px;
    height: 100%;
    border-radius: 0 15px 15px 0;
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
}

div#Drob_windows_left {
    width: 12px;
    height: 100%;
    border-radius: 15px 0 0 15px;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
}

div#Drob_windows:hover, div#Drob_windows_bottom:hover, div#Drob_windows_left:hover, div#Drob_windows_right:hover {
    cursor: all-scroll;
}

.li_Menu_Title {
    font-weight: 600;
    color: white;
    margin-left: 25px;
    line-height: 2;
    transition: 2s;
}

svg.li_Menu_Icon {
    width: 30px;
    height: 30px;
}

li.li_Menu {
    display: flex;
    margin-top: 25px;
}

.TitleTop {
    color: #a1a6ac;
    font-size: 0.9rem;
    padding: 15px 0;
    position: relative;
}

.MenuSidebar {
    position: absolute;
    top: 145px;
    border-top: 1px solid #6868686b;
    width: 82%;
}

.WindowsTik {
    display: flex;
}

.InfoCo {
    position: absolute;
    top: 72px;
    display: flex;
}

.InfoCo_Title {
    color: white;
    line-height: 3.3;
    margin-left: 10px;
    transition: 2s;
}

.InfoCo_Logo_Box {
    background-color: white;
    width: 35px;
    height: 35px;
    padding: 8px;
    border-radius: 100%;
    position: relative;
}

img.InfoCo_Logo {
    width: 30px;
    height: 30px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.IconSwitcher {
    width: 35px;
    height: 20px;
    margin: auto;
    fill: white;
}

.SwitcherSidebar {
    width: 35px;
    height: 35px;
    background-color: rgb(40 40 40 / 34%);
    position: absolute;
    right: 29px;
    float: right;
    border-radius: 100%;
    border: 1px solid #ffffff12;
    line-height: 2.7;
    cursor: pointer;
}

.TikSidebar {
    display: flex;
    padding-top: 11px;
}

.TikSidebar div {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border-radius: 100%;
}

.TikSidebar div:nth-child(1) {
    background: #ff5c4c;
}

.TikSidebar div:nth-child(2) {
    background: #ffbf38;
}

.TikSidebar div:nth-child(3) {
    background: #66e14f;
}

.MainSidebar {
    width: 270px;
    height: 650px;
    background-color: rgb(10 10 10 / 34%);
    backdrop-filter: blur(23px);
    position: fixed;
    right: 0;
    left: 0;
    top: 34px;
    bottom: 0;
    margin: 0 auto;
    border-radius: 15px;
    border: 1px solid #ffffff12;
    padding: 24px 31px;
    animation-duration: 1s;
}

li.li_Menu_top:nth-child(1) {
    margin-top: 0;
}

.KeyMainSidebar {
    animation-name: MainSidebar;
}

.KeyMainSidebar_back {
    animation-name: MainSidebar_back;
}

@keyframes MainSidebar {
    from {
        width: 270px;
    }

    to {
        width: 27px;
    }
}

@keyframes MainSidebar_back {
    from {
        width: 27px;
    }

    to {
        width: 270px;
    }
}

</style>
    </head>
    <body>
        <!-- partial:index.partial.html -->
        <div class="MainSidebar" id="box">
            <div id="Drob_windows"></div>
            <div id="Drob_windows_bottom"></div>
            <div id="Drob_windows_left"></div>
            <div id="Drob_windows_right"></div>
            <div>
                <div class="WindowsTik">
                    <div class="TikSidebar">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="SwitcherSidebar">
                        <svg class="IconSwitcher" xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" width="512" height="512">
                            <link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-custom-link"/>
                            <link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-general-link"/>
                            <style xmlns="" lang="en" type="text/css" id="dark-mode-custom-style" />
                                <style xmlns="" lang="en" type="text/css" id="dark-mode-native-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-sheet"/><path d="M13.293,18.586,7.707,13a1,1,0,0,1,0-1.414L13.293,6A1,1,0,0,1,15,6.707V17.879A1,1,0,0,1,13.293,18.586Z"/></svg> </div> </div> <div class="InfoCo"> <div class="InfoCo_Logo_Box"> <img class="InfoCo_Logo" src="//repo.bfw.wiki/bfwrepo/icon/652f36b2c1b09.png" alt=""> </div> <div class="InfoCo_Title">Microsoft Design</div> </div> </div> <div class="MenuSidebar"> <div class="TitleTop">MENU</div> <li class="li_Menu li_Menu_top"> <svg class="li_Menu_Icon" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none"><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-custom-link"/><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-general-link"/><style xmlns="" lang="en" type="text/css" id="dark-mode-custom-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-sheet"/><path d="M3 10C3 7.17157 3 5.75736 3.87868 4.87868C4.75736 4 6.17157 4 9 4H15C17.8284 4 19.2426 4 20.1213 4.87868C21 5.75736 21 7.17157 21 10C21 12.8284 21 14.2426 20.1213 15.1213C19.2426 16 17.8284 16 15 16H9C6.17157 16 4.75736 16 3.87868 15.1213C3 14.2426 3 12.8284 3 10Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.56689 12H4.8558C4.05238 12 3.65068 12 3.37733 12.2175C3.31819 12.2646 3.26457 12.3182 3.21751 12.3773C3 12.6507 3 13.0524 3 13.8558V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V13.8558C21 13.0524 21 12.6507 20.7825 12.3773C20.7354 12.3182 20.6818 12.2646 20.6227 12.2175C20.3493 12 19.9476 12 19.1442 12H18.4331C17.7346 12 17.3853 12 17.0908 12.0932C16.5803 12.2548 16.1559 12.6143 15.9126 13.0913C15.7723 13.3665 15.7148 13.711 15.6 14.4L15.6 14.4L15.6 14.4L15.6 14.4001C15.5713 14.5723 15.5569 14.6584 15.5218 14.7272C15.461 14.8464 15.3549 14.9363 15.2273 14.9767C15.1537 15 15.0664 15 14.8917 15H9.10828C8.93365 15 8.84633 15 8.7727 14.9767C8.64508 14.9363 8.53897 14.8464 8.47815 14.7272C8.44306 14.6584 8.42871 14.5723 8.4 14.4C8.28517 13.711 8.22775 13.3665 8.08739 13.0913C7.8441 12.6143 7.4197 12.2548 6.90919 12.0932C6.61466 12 6.26541 12 5.56689 12ZM9.5 17C9.22386 17 9 17.2239 9 17.5C9 17.7761 9.22386 18 9.5 18H14.5C14.7761 18 15 17.7761 15 17.5C15 17.2239 14.7761 17 14.5 17H9.5Z" fill="#757f91"/></svg> <div class="li_Menu_Title">My Offers</div> </li> <li class="li_Menu"> <svg class="li_Menu_Icon" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none"><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-custom-link"/><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-general-link"/><style xmlns="" lang="en" type="text/css" id="dark-mode-custom-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-sheet"/><path d="M5 5C5 3.89543 5.89543 3 7 3H11.75C11.8881 3 12 3.11193 12 3.25V8C12 9.10457 12.8954 10 14 10H18.75C18.8881 10 19 10.1119 19 10.25V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19V5Z" fill="white"/><path d="M13 8V3.60355C13 3.38083 13.2693 3.26929 13.4268 3.42678L18.5732 8.57322C18.7307 8.73071 18.6192 9 18.3964 9H14C13.4477 9 13 8.55228 13 8Z" fill="#757f91"/><path d="M8.5 13.5L14.5 13.5" stroke="#757f91" stroke-linecap="round"/><path d="M8.5 16.5L13.5 16.5" stroke="#757f91" stroke-linecap="round"/></svg> <div class="li_Menu_Title">User's Task</div>
            </li>
            <li class="li_Menu">
                <svg class="li_Menu_Icon" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none"><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-custom-link"/><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-general-link"/><style xmlns="" lang="en" type="text/css" id=&.........完整代码请登录后点击上方下载按钮下载查看