css实现响应式自适应侧边栏菜单效果代码-html代码-BFW代码库

css实现响应式自适应侧边栏菜单效果代码

代码语言：html

代码描述：css实现响应式自适应侧边栏菜单效果代码

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

<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.5.8.55.css">
    <style>
        :root {
      --sidebar-width: 4.5em;
    }
    
    body {
      margin: 0;
      padding: 0;
      background: #f7f7f7;
      font-family: 'Roboto';
    }
    
    * {
      outline: none;
      box-sizing: border-box;
    }
    
    .main {
      margin-left: auto;
      margin-right: auto;
      max-width: 992px;
      padding: 2em 1.5em;
    }
    
    .main h2 {
      font-size: 2em;
      margin-top: 0px;
    }
    
    .main p {
      color: #444;
      font-size: 1.25em;
      line-height: 2;
      text-align: justify;
    }
    
    @media (min-width: 572px) {
      .main {
        margin-left: var(--sidebar-width);
      }
    }
    
    @media (min-width: 992px) {
      .main {
        padding: 2.5em;
      }
    }
    .sidebar {
    	background-color: #333;
    	position: fixed;
    	transition: width 0.2s ease;
    }
    
    .sidebar nav {
    	height: 100%;
    }
    
    .sidebar .sidebar__nav {
    	display: flex;
    	height: 100%.........完整代码请登录后点击上方下载按钮下载查看