每当我打开侧边栏时,主要内容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>
1条答案
按热度按时间ozxc1zmp1#
在
.dashboard-sidebar-nav
类中设置left: -414px;
。然后你的.dashboard-sidebar-nav.show
有left: 0;
,这意味着 * 侧边栏 * 将切换到左侧。我对你的工作做了一些修改。