<div class="sidebar">
  <n*>
    <a href="#">首页</a>
    <a href="#">关于</a>
    <a href="#">服务</a>
    <a href="#">联系</a>
  </n*>
</div>
<p><main class="main-content">
<h1>主内容区域</h1>
<p>这里是主要内容。</p>
</main></p>

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background-color: #333;
  color: white;
  padding: 20px;
}
<p>.sidebar a {
display: block;
color: white;
text-decoration: none;
margin-bottom: 15px;
font-size: 16px;
}</p><p>.main-content {
margin-left: 270px; /<em> 留出侧边栏空间 + 间距 </em>/
padding: 20px;
}</p>

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -250px; /* 默认隐藏在屏幕外 */
    transition: left 0.3s ease;
  }
<p>.sidebar.active {
left: 0; /<em> 展开时显示 </em>/
}</p><p>.main-content {
margin-left: 0;
padding: 20px;
}
}</p>

// J*aScript 控制侧边栏开关
document.querySelector('.toggle-btn').addEventListener('click', function() {
  document.querySelector('.sidebar').classList.toggle('active');
});

<button class="toggle-btn">☰</button>
<div class="sidebar">...</div>

.toggle-btn {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  background: #333;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}
<p>@media (max-width: 768px) {
.toggle-btn {
display: block;
}
}</p>