响应式侧边栏实现方法详解

<div class="container">
  <nav class="sidebar">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
  <main class="content">
    <h1>欢迎使用响应式侧边栏</h1>
    <p>调整浏览器宽度查看效果。</p>
  </main>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
<p>.container {
display: flex;
min-height: 100vh;
}</p><p>.sidebar {
width: 250px;
background: #333;
color: white;
position: fixed;
left: -250px;
top: 0;
bottom: 0;
transition: left 0.3s ease;
}</p><p>.sidebar ul {
list-style: none;
padding: 20px 0;
}</p><p>.sidebar ul li {
padding: 15px 20px;
}</p><p>.sidebar ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}</p><p>.content {
flex: 1;
padding: 20px;
background: #f4f4f4;
}</p><p>/<em> 添加一个伪元素或按钮来触发菜单（可选JS控制） </em>/
/<em> 这里仅用CSS，可通过:hover模拟展开 </em>/
.sidebar:hover {
left: 0;
}</p>

@media (min-width: 768px) {
  .sidebar {
    position: static;
    width: 250px;
    transition: none;
  }
<p>.sidebar:hover {
left: 0; /<em> 移除hover效果 </em>/
}
}
</p>