I tried to learn Yout*be navigation toggle
But it seems like my click event is jumpy
Event flow already works like I want :
- User clicks the button, then the menu shows. and body position is fixed
- If user clicks outside the opened menu, hide menu and body position is back to normal (static)
- Or user clicks the button menu again, hide the menu and body back to static
Until #3, everything is working smooth and fine
The problem is
- User clicks button, menu shows, and body is fixed
- User clicks other menu button, first opened menu stays open, then the selected menu also opens
I want the first opened menu to close, then open user selected menu
How to solve this ?
PAGE
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preconnect dns-prefetch" href="//cdnjs.cloudflare.com" crossorigin/>
<style>
html {
width: 100%;
min-height: 100%;
min-width: 330px;
max-width: 1600px;
margin: 0 auto;
}
body {
background-color: #fff;
width: inherit;
max-width: inherit;
height: auto;
min-height: inherit;
font: 15px "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: normal;
text-overflow: ellipsis;
line-height: 1;
color: #404040;
scroll-behavior: smooth;
letter-spacing: .25px;
transition: all .2s ease-in-out;
}
header {
position: fixed;
background-color: #fff;
height: 54px;
box-shadow: 0 1px 0 0 #d9d9d9;
max-width: inherit;
position: fixed;
top: 0;
width: 100%;
z-index: 1000 /* level 3 */
}
nav {
height: 40px;
margin: 7px auto;
width: 98%
}
#left_nav, #user {
display: inline-block;
width: 40px;
height: 40px;
font-size: 24px;
background-color: skyblue;
border-radius: 50%;
margin-left: 5px;
vertical-align: top;
line-height: 40px;
color: #666;
}
#outer_modal {
display: none;
position: absolute;
top: 55px;
right: 1%;
width: 320px;
max-width: 320px;
height: calc(100% - 55px);
max-height: calc(100% - 55px);
z-index: 10000000;
}
#nav-user {
position: fixed;
width: inherit;
max-width: inherit;
height: auto;
max-height: inherit;
z-index: inherit;
overflow-y: auto;
background-color: #fff;
box-shadow: 0 1px 3px 0 #d9d9d9;
}
aside {
display: none;
position: relative;
top: 55px;
left: 0;
width: 290px;
max-width: 290px;
height: calc(100% - 55px);
max-height: calc(100% - 55px);
z-index: 100000;
}
aside #wrapper-content {
position: fixed;
width: inherit;
max-width: inherit;
height: auto;
max-height: inherit;
z-index: inherit;
overflow-y: auto;
background-color: #fff;
opacity: inherit;
}
</style>
</head>
<body>
<header>
<nav>
<button type="button" id="left_nav">
<i class="mdi mdi-menu"></i>
</button>
<button type="button" id="user">
<i class="mdi mdi-face"></i>
</button>
<div id="outer_modal">
<div id="nav-user">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet lacus
nec quam dapibus dignissim. Nullam varius quam vel eros volutpat aliquet. Aliquam ac
congue lorem. Ut id quam sodales, cursus lectus quis, bibendum eros. Aliquam
convallis eleifend ante quis feugiat. Nullam arcu urna, elementum et tincidunt
sit amet, viverra vel quam. Pellentesque tincidunt tristique ligula et dictum.
Proin efficitur risus a nisl interdum ornare. Etiam scelerisque, lectus vitae
vehicula luctus, tortor dui dictum nunc, in lacinia ligula lectus ac purus.
Mauris nec massa vitae orci cursus rutrum. Donec vulputate ex a eros rhoncus
faucibus nec aliquet metus. Quisque maximus semper cursus. Ut convallis non
mauris in ultricies. Vivamus at eros vel risus malesuada pulvinar. Etiam mattis
mollis pellentesque. Vivamus vel ante congue, malesuada lectus a, pulvinar mi.
Maecenas maximus semper nulla, id semper dolor ultrices ac. Integer dignissim,
velit et dapibus blandit, ante nisl volutpat magna, eu venenatis urna odio vitae
mi.
</div>
</div>
</nav>
</header>
<aside>
<div id="wrapper-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet lacus nec
quam dapibus dignissim. Nullam varius quam vel eros volutpat aliquet. Aliquam ac congue
lorem. Ut id quam sodales, cursus lectus quis, bibendum eros. Aliquam convallis eleifend
ante quis feugiat. Nullam arcu urna, elementum et tincidunt sit amet, viverra vel quam.
Pellentesque tincidunt tristique ligula et dictum. Proin efficitur risus a nisl interdum
ornare. Etiam scelerisque, lectus vitae vehicula luctus, tortor dui dictum nunc, in
lacinia ligula lectus ac purus.
Mauris nec massa vitae orci cursus rutrum. Donec vulputate ex a eros rhoncus faucibus
nec aliquet metus. Quisque maximus semper cursus. Ut convallis non mauris in ultricies.
Vivamus at eros vel risus malesuada pulvinar. Etiam mattis mollis pellentesque. Vivamus
vel ante congue, malesuada lectus a, pulvinar mi. Maecenas maximus semper nulla, id
semper dolor ultrices ac. Integer dignissim, velit et dapibus blandit, ante nisl
volutpat magna, eu venenatis urna odio vitae mi.
</div>
</aside>
<!-- lorem ipsum below (inside p tag) only to make body have scroll bar -->
<p style="margin-top: 54px; line-height: 20px;">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum aliquet lacus nec quam dapibus dignissim. Nullam varius quam vel
eros volutpat aliquet. Aliquam ac congue lorem. Ut id quam sodales, cursus lectus quis,
bibendum eros. Aliquam convallis eleifend ante quis feugiat. Nullam arcu urna, elementum et
tincidunt sit amet, viverra vel quam. Pellentesque tincidunt tristique ligula et dictum.
Proin efficitur risus a nisl interdum ornare. Etiam scelerisque, lectus vitae vehicula
luctus, tortor dui dictum nunc, in lacinia ligula lectus ac purus.
Mauris nec massa vitae orci cursus rutrum. Donec vulputate ex a eros rhoncus faucibus nec
aliquet metus. Quisque maximus semper cursus. Ut convallis non mauris in ultricies. Vivamus
at eros vel risus malesuada pulvinar. Etiam mattis mollis pellentesque. Vivamus vel ante
congue, malesuada lectus a, pulvinar mi. Maecenas maximus semper nulla, id semper dolor
ultrices ac. Integer dignissim, velit et dapibus blandit, ante nisl volutpat magna, eu
venenatis urna odio vitae mi.
Ut tristique urna ornare ante tincidunt sodales. Etiam ut rhoncus ex. Sed pretium malesuada
turpis id eleifend. Pellentesque ullamcorper condimentum ligula, non tincidunt arcu rhoncus
ut. Proin in velit vel velit placerat mattis. Duis ut lobortis sapien, a egestas nulla.
Curabitur accumsan efficitur justo id dignissim. Etiam sagittis turpis rhoncus nibh
vestibulum, non feugiat eros ornare. Nam sit amet massa molestie odio tempor fringilla et a ex.</p>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/MaterialDesignWebfont/4.4.95/css/materialdesignicons.min.css" integrity="sha256Oc9/ZPm5B07aJEXLaFs7vkuVzAO1pKJo8EKmiuqG9Qo=" crossorigin="anonymous">
</body>
</html>
Javascript
left_nav.addEventListener("click", function(event) { /* user click button menu */
event.stopPropagation();
if (document.querySelector("aside").style.display == "") { /* if aside (menu) display is empty */
document.querySelector("aside").style.display = "block"; /* set aside to display: block */
document.querySelector("body").style.position = "fixed"; /* set body position to fixed (PREVENT BODY SCROLLING) */
document.querySelector("body").style.backgroundColor = "rgba(0, 0, 0, .25)"; /* dim body background-color */
} else { /* USER CLICK BUTTON MENU "AGAIN" */
document.querySelector("aside").style.display = ""; /* hide aside */
document.querySelector("body").style.position = ""; /* body scroll is back to normal (static) */
document.querySelector("body").style.backgroundColor = "rgb(255, 255, 255)"; /* body background color is back to normal */
}
document.addEventListener("click", function hide(e) {
if (! e.target.closest("#left_nav") && ! e.target.closest("aside")) {
document.querySelector("aside").style.display = "";
document.querySelector("body").style.position = "";
document.querySelector("body").style.backgroundColor = "rgb(255, 255, 255)";
};
document.removeEventListener("click", hide);
});
});
user.addEventListener("click", function(event) {
event.stopPropagation();
if (document.getElementById("outer_modal").style.display == "") {
document.getElementById("outer_modal").style.display = "block";
document.querySelector("body").style.position = "fixed";
document.querySelector("body").style.backgroundColor = "rgba(0, 0, 0, .25)";
} else {
document.getElementById("outer_modal").style.display = "";
document.querySelector("body").style.position = "";
document.querySelector("body").style.backgroundColor = "rgb(255, 255, 255)";
}
document.addEventListener("click", function hide(e) { /* add click event to document */
if (! e.target.closest("#outer_modal") && ! e.target.closest("#user")) { /* IF USER CLICK IS NOT INSIDE target element / closest to it */
document.getElementById("outer_modal").style.display = ""; /* menu hide */
document.querySelector("body").style.position = ""; /* body back to normal show scrollbar */
document.querySelector("body").style.backgroundColor = "rgb(255, 255, 255)";
};
document.removeEventListener("click", hide); /* remove document click event */
});
});