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%;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    .sidebar .sidebar__nav .sidebar__nav__link {
    	align-items: center;
    	color: #bbb;
    	display: flex;
    	padding-left: 20px;
    	text-decoration: none;
    	transition: color 0.2s ease, background-color 0.2s ease;
    }
    
    .sidebar .sidebar__nav .sidebar__nav__link:hover {
    	background-color: rgba(0, 0, 0, 0.15);
    	color: #80f;
    }
    
    .sidebar .sidebar__nav .sidebar__nav__text {
    	display: none;
    	margin-left: 10px;
    	margin-right: auto;
    	white-space: nowrap;
    }
    
    .sidebar .sidebar__nav i {
    	align-items: center;
    	display: flex;
    	justify-content: center;
    }
    
    @media (max-width: 572px) {
    	.sidebar {
    		bottom: 0;
    		width: 100%;
    	}
    
    	.sidebar .sidebar__nav {
    		justify-content: center;
    	}
    
    	.sidebar .sidebar__nav .sidebar__nav__link {
    		height: 100%;
    		padding: 0.75em;
    	}
    
    	.sidebar .sidebar__nav i {
    		font-size: 2rem;
    	}
    }
    
    @media (min-width: 572px) {
    	.sidebar {
    		height: 100vh;
    		left: 0;
    		width: var(--sidebar-width);
    	}
    
    	.sidebar:hover {
    		width: 14rem;
    	}
    
    	.sidebar .sidebar__nav {
    		flex-direction: column;
    	}
    
    	.sidebar .sidebar__nav li:last-child {
    		margin-top: auto;
    	}
    
    	.sidebar .sidebar__nav .sidebar__nav__link {
    		padding: 1em;
    	}
    
    	.sidebar:hover .sidebar__nav .sidebar__nav__text {
    		display: inline;
    	}
    
    	.sidebar .sidebar__nav i {
    		font-size: 2.5rem;
    	}
    }
    
    @media (max-height: 434px) {
    	.sidebar {
    		overflow-y: scroll;
    	}
    }
    </style>
</head>

<body>
    <aside class="sidebar">
        <nav>
            <ul class="sidebar__nav">
                <li>
                    <a href="#" class="sidebar__nav__link">
                        <i class="mdi mdi-fingerprint"></i>
                        <span class="sidebar__nav__text">Fingerprint</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="sidebar__nav__link">
                        <i class="mdi mdi-credit-card"></i>
                        <span class="sidebar__nav__text">Credit card</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="sidebar__nav__link">
                        <i class="mdi mdi-cart"></i>
                        <span class="sidebar__nav__text">Shopping cart</span>
                    </a.........完整代码请登录后点击上方下载按钮下载查看