css布局左侧导航条管理面板效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局左侧导航条管理面板效果代码

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

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

<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
    *{margin:0;padding:0;list-style-type:none;}
    a,ing{border:0;}
    :root {
      --blue: #1376ff;
      --black: #222228;
      --white: #fff;
      --gray-medium: #39393e;
      --gray-light: #b0b0b2;
      --radius: 10px;
      --item-padding: 1.5rem 1.6rem;
      --sidebar-width: 305px;
    }
    
    .sidebar {
      width: var(--sidebar-width);
      color: var(--gray-light);
      background-color: var(--black);
      padding: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .sidebar__top .search {
      display: flex;
      background-color: var(--gray-medium);
      padding: var(--item-padding);
      border-radius: var(--radius);
    }
    .sidebar__top .search input {
      border: 0;
      outline: 0;
      background: 0 0;
      margin-left: 12px;
      color: inherit;
    }
    .sidebar__top .search input::placeholder {
      font-size: 1.6rem;
      font-weight: 700;
    }
    .sidebar__top .top {
      margin-bottom: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sidebar__top .top h2 {
      color: var(--white);
      font-size: 2.4rem;
      font-weight: 700;
    }
    .sidebar__top .top .humburger {
      width: 2.6rem;
      cursor: pointer;
    }
    .sidebar__top .top .humburger .line {
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--white);
    }
    .sidebar__top .top .humburger .line:not(:last-child) {
      margin-bottom: 4px;
    }
    .sidebar__nav {
      width: 100%;
      padding-top: 22px;
    }
    .sidebar__nav h5 {
      font-size: 1.2rem;
      margin-bottom: 22px;
      font-weight: 700;
    }
    .sidebar h2 {
      color: var(--white);
      font-size: 3.2rem;
    }
    
    .sidebar__menu--item {
      cursor: pointer;
      padding: var(--item-padding);
      border-radius: var(--radius);
      transition: all 150ms cubic-bezier(0.92, 0.69, 0.65, 0.88);
    }
    .sidebar__menu--item:hover {
      color: var(--white);
    }
    .sidebar__menu--item:hover svg {
      fill: var(--white);
    }
    .sidebar__menu--item.is-active {
      color: var(--white);
      background-color: var(--blue);
    }
    .sidebar__menu--item.is-active svg {
      fill: var(--white);
    }
    .sidebar__menu--item:not(:last-child) {
      margin-bottom: 1rem;
    }
    .sidebar__menu--item span {
      margin-left: 1.2rem;
    }
    
    .sidebar__profile {
      margin-top: auto;
      display: flex;
      align-items: center;
    }
    .sidebar__profile .avatar {
      width: 50px;
      height: 50px;
      border-radius: var(--radius);
      align-self: stretch;
      overflow: hidden;
    }
    .sidebar__profile .avatar img {
      border-radius: inherit;
    }
    .sidebar__profile .content {
      margin-left: 12px;
    }
    .sidebar__profile .content strong {
      font-size: 12px;
      margin-bottom: 10px;
    }
    .sidebar__profile .content p {
      color: var(--white);
    }
    .sidebar__profile .arrow {
      margin-left: auto;
      background-color: var(--gray-medium);
      border-radius: var(--radius);
      width: 25px;
      height: 25px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .sidebar__profile .arrow svg {
      width: 13px;
      height: 13px;
    }
    
    html {
      font-size: 10px;
      box-sizing: border-box;
    }
    
    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
    
    svg {
      width: 18px;
      height: 18px;
      fill: var(--gray-light);
    }
    
    body {
      width: 100%;
      height: 100vh;
      color: #060712;
      background-color: #f8f4f2;
      font-family: "Roboto", sans-serif;
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 1.15;
      overflow: hidden;
      position: relative;
      display: grid;
      grid-template-columns: var(--sidebar-width) 1fr;
    }
    
    img {
      display: block;
      max-width: 100%;
      object-fit: cover;
    }
    </style>

</head>

<body>

    <div class="sidebar">
        <!-- sidebartop -->
        <div class="sidebar__top">
            <div class="top">
                <h2>管理面板</h2>
                <div class="humburger">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="search">
                <svg class="icon" height="512" viewBox="0 0 515.558 515.558" width="512" xmlns="http://www.w3.org/2000/svg">
        <path d="M378.344 332.78c25.37-34.645 40.545-77.2 40.545-123.333C418.889 93.963 324.928.002 209.444.002S0 93.963 0 209.447s93.961 209.445 209.445 209.445c46.133 0 88.692-15.177 123.337-40.547l137.212 137.212 45.564-45.564L378.344 332.78zm-168.899 21.667c-79.958 0-145-65.042-145-145s65.042-145 145-145 145 65.042 145 145-65.043 145-145 145z" /></svg>
                <input type="text" name="seach" placeholder="输入关键词..." />
            </div>
        </div>
        <!--sidebar navigation -->
        <div class="sidebar__nav">
            <h5>导航菜单</h5>
            <ul class="sidebar__menu">
                <li class="sidebar__menu--item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001">
          <path d="M503.402 228.885L273.684 19.567c-10.083-9.189-25.288-9.188-35.367-.001L8.598 228.886c-8.077 7.36-10.745 18.7-6.799 28.889 3.947 10.189 13.557 16.772 24.484 16.772h36.69v209.721c0 8.315 6.742 15.057 15.057 15.057h125.914c8.315 0 15.057-6.741 15.057-15.057V356.932h74.002v127.337c0 8.315 6.742 15.057 15.057 15.057h125.908c8.315 0 15.057-6.741 15.057-15.057V274.547h36.697c10.926 0 20.537-6.584 24.484-16.772 3.941-10.19 1.273-21.529-6.804-28.89zM445.092 42.73H343.973l116.176 105.636v-90.58c0-8.315-6.741-15.056-15.057-15.056z" /></svg>
                    <span>主页</span&.........完整代码请登录后点击上方下载按钮下载查看