Bagaimana untuk meletakkan div di sebelah bar sisi supaya apabila bar sisi dibuka, div ditolak ke kiri

Question

Setiap kali saya membuka bar sisi, div kandungan utama akan diletakkan di bawah bar sisi dan bukannya ditolak ke kanan, dan px div hendaklah sama dengan lebar bar sisi apabila dipaparkan. Saya menulis fungsi css dan js tetapi ia masih tidak berfungsi.

Ini masalahnya, mungkin saya tidak menyasarkan div yang betul. Atau mungkin saya kehilangan sifat css semasa menulis gaya. Harap anda semua boleh membantu saya dan memberi saya pautan ke dokumen atau artikel dengan masalah yang sama, ia akan sangat membantu saya dan pertumbuhan saya. Terima kasih

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

Anda berada di .dashboard-sidebar-nav 类中设置 left: -414px; 。然后您的 .dashboard-sidebar-nav.show 具有 left: 0; Ini bermakna Bar sisi akan bertukar-tukar di sebelah kiri.

Saya membuat beberapa pengubahsuaian pada kerja anda.

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?