如何实现侧边栏展开时推动main-content右移，避免被覆盖？

打开侧边栏时，main-content div被侧边栏覆盖，而非被推至右侧，要求偏移量与侧边栏宽度一致。已编写对应CSS和JavaScript函数，但问题仍未解决，怀疑目标div定位错误或CSS属性遗漏。

现有代码 #

HTML #

<header class="dashboard-navbar">
  <div class="logo">
    <span style="font-family: 'Urbanist'; font-weight: 900; font-size:24px; color: #000000">STATE UNIVERSITY</span>
  </div>
  <ul class="dashboard-nav-links">
    <li class="nav-item"><a href="#">UNIVERSITY SITE</a></li>
    <li class="nav-item"><a href="#">MY PROFILE</a></li>
    <li class='nav-item-toggle'>
      <a href="#" style="color:#000000; font-size: 32px;">
        <i class="bi bi-list"></i>MENU</a>
    </li>
  </ul>
</header>

<div class="dashboard-sidebar">
  <nav class="dashboard-sidebar-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Enrollment</a></li>
      <li><a href="#">My Checklist</a></li>
      <li><a href="#">University Services</a></li>
      <li><a href="#">Account</a></li>
    </ul>
    <div class="hide-menu">
      <a href="#">Hide Menu</a>
    </div>
  </nav>
</div>

<div class='main-content'>
  <h2>What is my enrollment status?</h2>
  <i class="bi bi-check"></i>
  <p>Approved</p>

  <h2>What do you need?</h2>
</div>

CSS #

.dashboard-navbar {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  height: 11.88em;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: 4px solid #F1B24B;
}

.dashboard-nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  margin-left: auto;
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  color: #000000;
}

.dashboard-nav-links .nav-item a {
  font-size: 23px;
  color: #000000;
  text-transform: uppercase;
}

.dashboard-nav-links li {
  margin-right: -20px;
  color: #000000 !important;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  padding-right: 40px;
}

.nav-item-toggle {
  display: flex;
  align-items: center;
  width: 223px;
  height: 11.90em;
  text-align: center;
  justify-content: center;
  padding-left: 40px;
}

ul li a {
  position: relative;
  display: block;
  text-transform: uppercase;
  margin: 20px 0;
  padding: 10px 20px;
  text-decoration: none;
  color: #262626;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 600;
  transition: 0.5s;
  z-index: 1;
}

ul li a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #174A41;
  border-bottom: 2px solid #174A41;
  transform: scaleY(2);
  opacity: 0;
  transition: 0.3s;
}

ul li a:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #262626;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
}

ul li a:hover {
  color: #fff !important;
  background-color: #174A41;
}

@keyframes grow {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

ul li a:hover:before {
  transform: scaleY(1);
  opacity: 1;
}

.nav-item-toggle a {
  display: flex;
  align-items: center;
}

.logo {
  margin-left: 100px;
}

.dashboard-sidebar-nav {
  display: flex;
  flex-direction: column;
  width: 414px;
  height: 100vh;
  background-color: #F1B24B;
  position: fixed;
  top: 0;
  left: -414px;
  transition: left 0.3s ease-in-out;
  margin-top: 165px;
}

.dashboard-sidebar-nav.show {
  left: 0;
}

.dashboard-sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 20px;
}

.dashboard-sidebar-nav ul li {
  margin: 10px 0;
}

.dashboard-sidebar-nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

.hide-menu {
  margin-top: auto;
  padding: 20px;
}

JavaScript #

const menuLink = document.querySelector('.dashboard-nav-links li:nth-child(3) a');
const navbar = document.querySelector('.dashboard-navbar');
const navItemToggle = document.querySelector('.nav-item-toggle');

menuLink.addEventListener('click', () => {
  navbar.classList.toggle('menu-open');
  if (navbar.classList.contains('menu-open')) {
    menuLink.innerHTML = 'CLOSE';
    navItemToggle.style.backgroundColor = '#F1B24B'; // Add background color
  } else {
    menuLink.innerHTML = '<i class="bi bi-list"></i>MENU';
    menuLink.style.color = '#000000'; // Set font color back to black
    navItemToggle.style.backgroundColor = 'transparent'; // Remove background color
  }
});

const navToggle = document.querySelector('.nav-item-toggle a');
const sidebar = document.querySelector('.dashboard-sidebar-nav');
const mainDiv = document.querySelector('.main-content');
const closeBtn = document.querySelector('.close-btn');


function toggleSidebar() {
  sidebar.classList.toggle('show');
  mainDiv.classList.toggle('sidebar-open');
}

function moveMainContentRight() {
  mainContent.style.marginLeft = '300px';
}

function moveMainContentLeft() {
  mainContent.style.marginLeft = '0';
}

// Event listeners
navToggle.addEventListener('click', function(event) {
  event.preventDefault();
  toggleSidebar();
});
closeBtn.addEventListener('click', toggleSidebar);

问题原因及修复方案 #

核心问题 #

1. 侧边栏定位特性：侧边栏使用position: fixed，脱离文档流，不会自动推开main-content，必须手动设置main-content的偏移量。
2. 未定义sidebar-open样式：JS中切换了sidebar-open类，但CSS里没有给main-content的该类设置具体样式，导致无效果。
3. 变量错误与未调用函数：moveMainContentRight/Left函数未被调用，且函数内使用未定义的mainContent变量（应为mainDiv）。
4. 关闭按钮选择器错误：HTML中无.close-btn元素，实际关闭按钮是.hide-menu a。

修复代码 #

新增/修改CSS

.main-content {
  transition: margin-left 0.3s ease-in-out; /* 添加平滑过渡 */
  padding: 20px;
  margin-top: 165px; /* 和侧边栏margin-top一致，避免被导航栏遮挡 */
}

.main-content.sidebar-open {
  margin-left: 414px; /* 与侧边栏宽度完全匹配 */
}

修改JavaScript

const menuLink = document.querySelector('.dashboard-nav-links li:nth-child(3) a');
const navbar = document.querySelector('.dashboard-navbar');
const navItemToggle = document.querySelector('.nav-item-toggle');

menuLink.addEventListener('click', () => {
  navbar.classList.toggle('menu-open');
  if (navbar.classList.contains('menu-open')) {
    menuLink.innerHTML = 'CLOSE';
    navItemToggle.style.backgroundColor = '#F1B24B';
  } else {
    menuLink.innerHTML = '<i class="bi bi-list"></i>MENU';
    menuLink.style.color = '#000000';
    navItemToggle.style.backgroundColor = 'transparent';
  }
});

const navToggle = document.querySelector('.nav-item-toggle a');
const sidebar = document.querySelector('.dashboard-sidebar-nav');
const mainDiv = document.querySelector('.main-content');
const closeBtn = document.querySelector('.hide-menu a'); // 修正选择器

function toggleSidebar() {
  sidebar.classList.toggle('show');
  mainDiv.classList.toggle('sidebar-open');
}

// Event listeners
navToggle.addEventListener('click', function(event) {
  event.preventDefault();
  toggleSidebar();
});
closeBtn.addEventListener('click', function(event) { // 添加preventDefault阻止跳转
  event.preventDefault();
  toggleSidebar();
});

说明 #

• 给main-content添加过渡效果，让偏移动画更流畅。
• 通过sidebar-open类控制main-content的margin-left，确保偏移量与侧边栏宽度一致。
• 修正关闭按钮的选择器，并添加preventDefault避免点击时页面跳转。
• 设置main-content的margin-top，避免被固定高度的导航栏遮挡内容。

内容的提问来源于stack exchange，提问作者CaptainCRAZY