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

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

代码语言：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 #to.........完整代码请登录后点击上方下载按钮下载查看