css布局实现左侧管理菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现左侧管理菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<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>
      </li>
      <li class="sidebar__menu--item">
        <svg height="512" viewBox="0 0 512.012 512.012" width="512" xmlns="http://www.w3.org/2000/svg">
          <path d="M495.266 394.775c11.112-23.435 16.742-48.57 16.742-74.794 0-93.61-74.304-170.285-167.347-174.787-20.968-75.53-89.845-128.213-168.653-128.213-97.047 0-176 78.505-176 175 0 26.224 5.63 51.359 16.742 74.794L.299 349.04c-2.094 10.472 7.144 19.728 17.618 17.656l83.279-16.465c20.862 9.896 43.054 15.426 66.17 16.529 29.148 104.951 146.217 157.593 243.452 111.471 91.207 18.032 84.094 16.75 86.189 16.75 9.479 0 16.56-8.686 14.709-17.941zm-385.17-73.6a15 15 0 00-9.737-1.359l-66.24 13.097 13.049-65.25a14.993 14.993 0 00-1.354-9.77c-10.487-20.516-15.806-42.691-15.806-65.912 0-79.953 65.495-145 146-145 62.915 0 118.319 40.91 137.681 99.417-91.706 11.725-160.775 94.472-151.914 189.891-18.075-1.737-35.391-6.787-51.679-15.114zm354.753 74.488l13.049 65.25-66.24-13.097a15.005 15.005 0 00-9.737 1.359c-20.516 10.487-42.691 15.806-65.912 15.806-79.953 0-145-65.047-145-145s65.047-145 145-145c80.505 0 146 65.047 146 145 0 23.221-5.318 45.396-15.806 65.912a14.992 14.992 0 00-1.354 9.77z" /></svg>
        <span>邮件信息</span>
      </li>
      <li class="sidebar__menu--item">
        <svg height="512" viewBox="0 0 502.017 502.017" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M251.009 0C112.38 0 0 112.38 0 251.009s112.38 251.009 251.009 251.009 251.009-112.38 251.009-251.009S389.637 0 251.009 0zm14.707 29.897c110.489 7.279 199.124 95.915 206.404 206.404H265.716zm-14.707 442.705c-122.187 0-221.594-99.406-221.594-221.594 0-117.243 91.533-213.511 206.886-221.111v221.111c0 3.901 1.55 7.641 4.308 10.399l156.326 156.326c-40.436 35.489-91.711 54.869-145.926 54.869zm166.726-75.667l-131.22-131.219h185.608c-3.177 48.743-22.126 94.457-54.388 131.219z"/></svg>
        <span>数据分析</span>
      </li>
      <li class="sidebar__menu--item">
        <svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
          <path d="M482 292.25V46c0-8.285-6.715-15-15-15h-76V15c0-8.285-6.715-15-15-15s-15 6.715-15 15v16h-60V15c0-8.285-6.715-15-15-15s-15 6.715-15 15v16h-60V15c0-8.285-6.715-15-15-15s-15 6.715-15 15v16h-60V15c0-8.285-6.715-15-15-15S91 6.715 91 15v16H15C6.715 31 0 37.715 0 46v391c0 8.285 6.715 15 15 15h249.805c24.25 36.152 65.488 60 112.195 60 74.438 0 135-60.563 135-135 0-32.07-11.25-61.563-30-84.75zM91 61v15c0 8.285 6.715 15 15 15s15-6.715 15-15V61h60v15c0 8.285 6.715 15 15 15s15-6.715 15-15V61h60v15c0 8.285 6.715 15 15 15s15-6.715 15-15V61h60v15c0 8.285 6.715 15 15 15s15-6.715 15-15V61h61v60H30V61zM30 422V151h422v113.805C430.535 250.41 404.73 242 377 242c-47.398 0-89.164 24.559-113.258 61.613A14.911 14.911 0 00257 302h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15h22.723a133.88 133.88 0 00-6.883 30H227c-8.285 0-15 6.715-15 15s6.715 15 15 15h15.84a133.666 133.666 0 006.883 3.........完整代码请登录后点击上方下载按钮下载查看