如何定位侧边栏旁边的 div，以便在侧边栏打开时将 div 推向左侧

Question

每当我打开侧边栏时，主要内容 div 都会位于侧边栏下方，而不是将其推到右侧，并且 div 的 px 应等于侧边栏显示时的宽度。我写了一个 css 和 js 函数，但它仍然不起作用。

问题就在这里，也许我没有瞄准正确的 div。或者也许我在编写样式时缺少 css 属性。希望你们能帮助我，给我一个有同样问题的文档或文章的链接，这对我和我的成长都有很大的帮助。谢谢

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);

.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;
}

<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>

Answer 1

您在 .dashboard-sidebar-nav 类中设置 left: -414px; 。然后您的 .dashboard-sidebar-nav.show 具有 left: 0; 这意味着侧边栏将在左侧切换。

我对你的工作做了一些修改。

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 = '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);

.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; */
  right: -414px;
  /* transition: left 0.3s ease-in-out; */
  transition: right 0.3s ease-in-out;
  margin-top: 165px;
}

.dashboard-sidebar-nav.show {
  /* left: 0; */
  right: 8px;
}

.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;
}

  


    STATE UNIVERSITY
  
  

    
UNIVERSITY SITE
    
MY PROFILE
    

      
        MENU
    
  



  

    

      
Home
      
Enrollment
      
My Checklist
      
University Services
      
Account
    
    

      Hide Menu
    
  



  
What is my enrollment status?
  
  
Approved

  
What do you need?