Reputation: 977
I need to close my sidebar with JavaScript. I try with the following code, but when I click on the icon that executes the opening of the sidebar, it simply does not open it anymore because the display:none is executed immediately.
This is my code with which I open and close the SideBar:
function openNavCategories() {
const overlayContent = document.getElementById('overlayContent-categories');
document.getElementById('nav-categories').style.width = '30%';
overlayContent.style.display = 'block';
overlayContent.style.width = '100%';
document.getElementById('category-icon').style.display = 'none';
document.getElementById('category-icon-open').style.display = 'block';
}
function closeNavCategories() {
const navCategories = document.getElementById('nav-categories');
navCategories.style.width = '0%';
navCategories.style.transition = 'all 0.4s';
document.getElementById('overlayContent-categories').style.display = 'none';
}
And this one with which I try to verify that the click is outside of my SideBar but it does not even show it anymore:
window.addEventListener('mouseup', function(event) {
var SideBar = document.getElementById('nav-categories');
if(event.target != SideBar && event.target.parentNode != SideBar ) {
SideBar.style.display = 'none';
}
})
And this is my HTML and SCSS:
<a href="#" class="closeBtn-categories" onclick="closeNavCategories()">X</a>
<div id="overlayContent-categories" class="overlay__content-categories">
<h2>Categorías</h2>
<a href="#" onclick="closeNavCategories()">Categoría 1</a>
<a href="#" onclick="closeNavCategories()">Categoría 2</a>
<a href="#" onclick="closeNavCategories()">Categoría 3</a>
<a href="#" onclick="closeNavCategories()">Categoría 4</a>
</div>
</div>
SCSS:
.overlay-categories {
position: fixed;
top:0;
right:0; // de derecha
width: 0%;
height: 100%;
background: rgba(0,0,0,.9);
overflow-x: hidden;
z-index: 10;
transition: all 0.8s;
h2 {
color: #506a80;
margin: .2rem 0 .5rem 0rem;
}
a {
padding: 10px;
color: #ccc;
font-size: 1rem;
text-decoration: none;
display:block;
&:hover {
color: #fff;
}
}
.closeBtn-categories {
position: absolute;
top:20px;
right: 35px;
font-size: 2rem;
}
.overlay__content-categories {
position: relative;
display: none;
top: 10%;
width: 0%;
text-align: center;
margin-top: 20px;
transition: all 2s linear;
}
}
Can you help me? Thanks.
Upvotes: 1
Views: 1378
Reputation: 1181
You can define css class for the opened/closed style rather than manipulate style attribute in the script runtime. It let you keep all the styles one place in the SCSS.
/* defined nav-categories__closed class*/
#nav-categories{
width: 30%;
.overlayContent-categories{
display: block;
width: 100%;
}
}
#nav-categories.nav-categories__closed{
width: 0%;
transition: all 0.4s;
.overlayContent-categories{
display: none;
}
}
Modify openNavCategories()
and closeNavCategories()
to only toggling the nav-categories__closed
function openNavCategories() {
const navCategories = document.getElementById('nav-categories');
navCategories.classList.toggle('nav-categories__closed', false);
}
function closeNavCategories() {
const navCategories = document.getElementById('nav-categories');
navCategories.classList.toggle('nav-categories__closed', true);
}
You have a third function to close the sidebar when a click is performed outside the sidebar. You may need to modify the function to include in the checking: If the event target is also not the control to open the sidebar, then invoke closeNavCategories()
. The purpose of closeNavCategories()
and the core part of mouseup event more or less doing the same job: to close the sidebar. You can eliminate the repeating code by referring to the same function.
Example: https://jsfiddle.net/rgfbLyon/5/
Upvotes: 1