css实现左侧边栏伸缩式导航条效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现左侧边栏伸缩式导航条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Boxicons -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/boxicons.min.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}body{position:relative;min-height:100vh;width:100%;overflow:hidden}::selection{color:#fff;background:#0cf}.main{position:relative;display:flex;min-height:100vh}.sidebar{position:fixed;top:0;left:0;height:100%;width:78px;background:#0cf;padding:6px 14px;z-index:99;transition:all .5s ease}.sidebar.active{width:240px}.sidebar .logo_content .logo{color:#fff;display:flex;height:50px;width:100%;align-items:center;opacity:0;transition:all .5s ease}.sidebar.active .logo_content .logo{opacity:1}.logo_content .logo i{font-size:28px;margin-right:5px}.logo_content .logo .logo_name{font-size:20px;font-weight:400}.logo_content .logo .logo_name a{cursor:pointer;text-decoration:none;color:#fff;display:flex;justify-content:center;align-items:center}.sidebar #toggle-menu-btn{position:absolute;color:#fff;top:6px;left:50%;font-size:22px;height:50px;width:50px;text-align:center;line-height:50px;transform:translateX(-50%);cursor:pointer}.sidebar.active #toggle-menu-btn{left:90%}.sidebar ul{margin-top:20px}.sidebar ul li{position:relative;height:50px;width:100%;margin:0 5px;list-style:none;line-height:50px;margin:5px 0}.sidebar ul li .tooltip{position:absolute;left:125px;top:0;transform:translate(-50%,-50%);border-radius:6px;height:35px;width:120px;background:#fff;line-height:35px;text-align:center;box-shadow:0 5px 10px rgba(0,0,0,0.2);transition:0s;opacity:0;pointer-events:none;display:block}.sidebar.active ul li .tooltip{display:none}.sidebar ul li:hover .tooltip{transition:all .5s ease;opacity:1;top:50%}.sidebar ul li input{position:absolute;height:100%;width:100%;left:0;top:0;border-radius:12px;outline:0;border:0;background:#1d1b31;padding-left:50px;font-size:18px;color:#fff}.sidebar ul li .bx-search{position:absolute;z-index:99;color:#fff;font-size:22px;transition:all .5 ease}.sidebar ul li .bx-search:hover{background:#fff;color:#1d1b31}.sidebar ul li a{color:#fff;display:flex;align-items:center;text-decoration:none;border-radius:12px;white-space:nowrap;transition:all .4s ease}.sidebar ul li a:hover{color:#0cf;background:#fff}.sidebar ul li i{font-size:18px;font-weight:400;height:50px;min-width:50px;border-radius:12px;line-height:50px;text-align:center}.sidebar .links_name{font-size:15px;font-weight:400;opacity:0;pointer-events:none;transition:all .3s ease}.sidebar.active .links_name{transition:0s;opacity:1;pointer-events:auto}.sidebar .profile_content{position:absolute;color:#fff;bottom:0;left:0;width:100%}.sidebar .profile_content .profile{position:relative;padding:10px 6px;height:60px;background:0;transition:all .4s ease}.sidebar.active .profile_content .profile{background:#1d1b31}.profile_content .profile .profile_details{display:flex;align-items:center;opacity:0;pointer-events:none;white-space:nowrap;transition:all .4s ease}.sidebar.active .profile_content .profile .profile_details{opacity:1;pointer-events:auto}.profile .profile_details img{height:45px;width:45px;object-fit:cover;border-radius:12px}.profile .profile_details .name_job{margin-left:10px}.profile .profile_details .name{font-size:15px;font-weight:400}.profile .profile_details .job{font-size:12px}.profile #log_out{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);min-width:50px;line-height:50px;font-size:20px;border-radius:12px;text-align:center;transition:all .4s ease;background:#1d1b31}.sidebar.active .profile #log_out{left:88%}.sidebar.active .profile #log_out{background:0}.home_content{position:absolute;height:100%;width:calc(100% - 78px);left:78px;background:#E4E9F7;box-shadow:0 5px 10px rgba(0,0,0,0.2px);transition:all .5s ease}.sidebar.active~.home_content{z-index:100}.home_content .text{font-size:25px;font-weight:500;color:#1d1b31;margin:12px}.sidebar.active~.home_content{width:calc(100% - 240px);left:240px}
    </style>
</head>

<body>
    <!-- ma.........完整代码请登录后点击上方下载按钮下载查看