I'm building a sidenav menu that appears and disappears when click a button. I learned a lot here about stacks, users have helped me up to this point, but now I can't integrate a function.
As you can see in the code, if you click button menu, the sidenav opens or closes if you press again. In addition to the button that works correctly, I would like to be able to close the menu when clicking outside the div container. I tried to do something and got half result, the problem is that now the menu opens even when don't click on the button and all the other elements on the page obviously don't work. I suppose this happens because the .mts_mob_container takes full width, but if I don't do so how can I close the menu by clicking outside the div?
I'm doing something obvious wrong, but I can't figure out what. I'm still a beginner, sorry for the many mistakes. Can someone help me ? I appreciate any response, thanks.
Edit: The code works here on stack and jsfiddle, except on my website.
Thanks to the intervention of #user2495207 the menu works as I wanted! I tried to put everything on my website (I have it in the header menu), it opens and closes with the button, but when I click outside the div it doesn't close.
As you can see here it works. Am I missing something?
var menu = document.querySelector(".mob_menu_button");
function mobile_menu() {
var x = document.getElementById("mts_mobile_menu");
if (!x.classList.contains("side_show")) {
x.classList.add ("side_show");
menu.innerHTML = 'Close Menu';
} else {
x.classList.add("side_hide");
menu.innerHTML = 'Open Menu';
setTimeout(function(){
x.classList.remove("side_show");
x.classList.remove("side_hide");
},300)
}
}
document.addEventListener("click", function (e) {
var x = document.getElementById("mts_mobile_menu");
if (e.target.localName == "html" && x.classList.contains("side_show")) {
x.classList.add("side_hide");
menu.innerHTML = "<span>Open menu</span>";
setTimeout(function () {
x.classList.remove("side_show");
x.classList.remove("side_hide");
}, 300);
}
});
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover>a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.mob_menu_button {
display: flex;
align-items: center;
width: 120px;
position: absolute;
top: 10px;
right: 10px;
background: #fbfbfb!important;
font-weight: 500!important;
justify-content: center;
}
.icn_button {
margin: 0;
font-size: 14px;
}
.icn_button:before {
margin: 0;
}
.icn_button:after {
margin: 0;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_mob_container {
display:flex;
position:fixed;
z-index: 999;
height: 100%;
top: 0;
left: 0;
}
.mts_sidenav_box {
display: block;
}
.mts_sidenav_content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
position: relative;
animation: animateFromLeft .3s;
}
#keyframes animateFromLeft {
from {
left: -500px;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}
#keyframes animateToLeft {
from {
left: 0;
opacity: 1;
}
to {
left: -500px;
opacity: 0;
}
}
.side_show {
display: block !important;
height: 100vh;
overflow: hidden;
width: 100%;
}
.mts_sidenav_content.side_hide {
animation: animateToLeft .4s;
}
<button onclick="mobile_menu()" class="mob_menu_button">Open Menu</button>
<div class="mts_mob_container">
<div class="mts_sidenav_box">
<div id="mts_mobile_menu" class="mts_sidenav_content">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
If you inspect the .mts_mob_container element in your browser you'll realize it's covering the button (the button isn't triggering any event) so i had to comment its dimensions:
.mts_mob_container {
display: flex;
position: fixed;
z-index: 999;
/* height: 100%; */
top: 0;
left: 0;
/* width: 100%;*/
}
I also added this block, an event when the user clicks outside the sidenav, the code inside is the same as the else part of the mobile_menu function to close the sidenav.
document.addEventListener("click", function (e) {
var x = document.getElementById("mts_mobile_menu");
if (e.target.id !== "mts_mobile_menu" && x.classList.contains("side_show")) {
x.classList.add("side_hide");
menu.innerHTML = "<span>Open menu</span>";
var y = document.getElementById("closing_div");
if (!x.classList.contains("side_show")) {
x.classList.add("side_hide");
}
setTimeout(function () {
x.classList.remove("side_show");
x.classList.remove("side_hide");
}, 500);
}
});
UPDATE:
The button event was propagating to its parent document so i added e.stopPropagation();.
In the event of the document; the if statement if(e.target.id !== "mts_mobile_menu" && x.classList.contains("side_show")) means that it'll execute if the target clicked isn't the sidenav and is showed
var menu = document.querySelector(".mob_menu_button");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mts_mobile_menu");
if (!x.classList.contains("side_show")) {
x.classList.add("side_show");
menu.innerHTML = "<span>Close menu</span>";
} else {
x.classList.add("side_hide");
menu.innerHTML = "<span>Open menu</span>";
var y = document.getElementById("closing_div");
if (!x.classList.contains("side_show")) {
x.classList.add("side_hide");
}
setTimeout(function () {
x.classList.remove("side_show");
x.classList.remove("side_hide");
}, 500);
}
}
document.addEventListener("click", function (e) {
var x = document.getElementById("mts_mobile_menu");
if (e.target.id !== "mts_mobile_menu" && x.classList.contains("side_show")) {
x.classList.add("side_hide");
menu.innerHTML = "<span>Open menu</span>";
var y = document.getElementById("closing_div");
if (!x.classList.contains("side_show")) {
x.classList.add("side_hide");
}
setTimeout(function () {
x.classList.remove("side_show");
x.classList.remove("side_hide");
}, 500);
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
.mob_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100px;
position: absolute;
top: 10px;
right: 10px;
background: #fbfbfb !important;
font-weight: 500 !important;
}
.icn_button {
margin: 0;
font-size: 14px;
}
.icn_button:before {
margin: 0;
}
.icn_button:after {
margin: 0;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_mob_container {
display: flex;
position: fixed;
z-index: 999;
/* height: 100%; */
top: 0;
left: 0;
/* width: 100%;*/
}
.mts_sidenav_box {
display: block;
}
.mts_sidenav_content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
position: relative;
animation: animateFromLeft 0.6s;
}
#keyframes animateFromLeft {
from {
left: -500px;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}
#keyframes animateToLeft {
from {
left: 0;
opacity: 1;
}
to {
left: -500px;
opacity: 0;
}
}
.side_show {
display: block !important;
height: 100vh;
overflow: hidden;
width: 100%;
}
.mts_sidenav_content.side_hide {
animation: animateToLeft 0.6s;
}
<button onclick="mobile_menu(event)" class="mob_menu_button">Open menu</button>
<div class="closing_div">
<div class="mts_mob_container">
<div class="mts_sidenav_box">
<div id="mts_mobile_menu" class="mts_sidenav_content">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid" />
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>
Related
I made a carousel with bootstrap (v5) and modified it to be 3 besides each other on large screen and only one on small screens. It worked just fine, but after adding some javascript and google analytics and coockies, the carousel items dissapear on small screens.
html part of the carousel:
<section id="diensten">
<h2>diensten</h2>
<div id="carouselExample" class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webhosting.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">hosting</p>
<div>
<button onclick="openHosting()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webdesign.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">webdesign</p>
<div>
<button onclick="openWebdesign()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/photography.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">fotografie</p>
<div>
<button onclick="openFotografie()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/domain_name.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">domein naam</p>
<div>
<button onclick="openDomeinNaam()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/seo.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">SEO</p>
<div>
<button onclick="openSeo()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/undraw_maintenance_re_59vn.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">onderhoud</p>
<div>
<button onclick="openOnderhoud()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
css part of the carousel (for small screens):
/* styling for the 'diensten' section */
h2 {
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin: 50px 0;
}
.card {
margin: 0 1em;
border: none;
max-width: 400px;
}
.card img {
max-width: 100%;
max-height: 100%;
}
.carousel-inner {
padding: 1em;
}
.img-wrapper {
max-width: 100%;
height: 65vw;
display: flex;
justify-content: center;
align-items: center;
}
.card-title {
font-size: 20px;
font-weight: 100;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.carousel-control-prev, .carousel-control-next {
width: 5vh;
height: 5vh;
background-color: #0D283C;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.card-body div {
text-align: center;
}
.extra-btn {
border: none;
border-radius: 100%;
padding: 6px 10px;
background-color: #0D283C;
color: white;
margin: auto;
transition: 0.2s;
}
.extra-btn:hover {
background-color: #3461AB;
}
.extra-btn span {
display: none;
}
/* extra info screens */
.overlay {
position: fixed;
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
}
.extra-info-card {
padding: 10px;
text-align: center;
border-radius: 30px;
margin: auto;
max-width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.extra-info-card>div {
position: relative;
}
.close-btn {
border: none;
border-radius: 100%;
padding: 3px 5px;
background-color: #0D283C;
color: white;
font-size: 2px;
transition: .2s;
}
.close-btn:hover {
background-color: #3461AB;
}
.close-btn span {
display: none;
}
.extra-info-card h1 {
text-transform: uppercase;
margin: 0;
}
.extra-info-card p {
margin: 15px auto;
max-width: 90%;
font-size: 14px;
font-weight: 100;
}
.extra-info-card img {
display: none;
margin: auto;
max-width: 30%;
}
.hidden {
display: none;
transition: .2s;
}
css for the bigger screens
#media screen and (min-width: 576px) {
.carousel-inner {
display: flex;
}
.carousel-item {
display: block;
margin-right: 0;
flex: 0 0 calc(100%/3);
}
.img-wrapper {
height: 23vw;
}
.close-btn {
padding: 6px 10px;
font-size: 10px;
}
}
#media screen and (min-width: 768px) {
h2 {
font-size: 25px;
}
header section:first-child img {
width: 100px;
}
.nav-item {
font-size: 30px;
}
.text-part {
text-align: left;
}
header section:last-child img {
display: block;
}
section:nth-child(2) h1 {
font-size: 24px;
}
section:nth-child(2) a {
font-size: 15px;
}
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 90%;
margin: 150px auto;
}
#over-ons h2 {
margin-bottom: 10px;
padding-left: 5px;
text-align: left;
border-left: 3px solid #0D283C;
}
#over-ons p {
text-align: left;
font-size: 16px;
}
#over-ons img {
display: block;
}
#proces img {
display: block;
width: 75%;
margin: auto;
}
#landing {
height: 100%;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
}
.extra-info-card img {
display: block;
}
#proces h3 {
font-size: 18px;
}
#proces p {
font-size: 16px;
}
}
#media screen and (min-width:992px) {
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 992px;
margin: 150px auto;
}
section:nth-child(2) h1 {
font-size: 30px;
}
section:nth-child(2) a {
font-size: 20px;
}
}
The 2 different javascript files (make it 3 items & extra info button functionality)
const multiItemCarousel = document.querySelector('#carouselExample')
if (window.matchMedia("(min-width:576px)").matches) {
const carousel = new bootstrap.Carousel(multiItemCarousel, {
interval: false
})
var carouselWidth = $('.carousel-inner')[0].scrollWidth;
var cardWidth = $('.carousel-item').width();
var scrollPosition = 0;
$('.carousel-control-next').on('click', function () {
if (scrollPosition < (carouselWidth - (cardWidth * 4))) {
scrollPosition = scrollPosition + cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
$('.carousel-control-prev').on('click', function () {
if (scrollPosition > 0) {
scrollPosition = scrollPosition - cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
};
function openHosting() {
console.log("open")
var hosting = document.getElementById("hosting");
hosting.classList.remove("hidden")
}
function openWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.remove("hidden")
}
function openFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.remove("hidden")
}
function openDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.remove("hidden")
}
function openSeo() {
var seo = document.getElementById("seo");
seo.classList.remove("hidden")
}
function openOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.remove("hidden")
}
//alle functies voor het sluiten van de verschillende extra info secties
function closeHosting() {
console.log("close")
var hosting = document.getElementById("hosting")
hosting.classList.add("hidden")
}
function closeWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.add("hidden")
}
function closeFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.add("hidden")
}
function closeDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.add("hidden")
}
function closeSeo() {
var seo = document.getElementById("seo");
seo.classList.add("hidden")
}
function closeOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.add("hidden")
}
I have a side menu that basically works fine, however the background overlay doesn't allow me to click anything on the website. I'm trying to modify the #container_overlay and #container_overlay.on class. Respectively on the first class I always put a parameter that hides the element, while on the second class (on) put a parameter that shows the element. I have been playing with z-inde -999 to 999 so far and it works, only I get an unpleasant effect during the transition. Then I also tried with left 0 to 100% trying to make a slide of the overlay, and even here I didn't like the effect of the transition.
What I'm trying to do is make the overlay appear only with opacity 0 to 1. But when this is off it stays there to cover everything by not letting me click anything. Is there any way to fix?
Sorry but I'm new, I appreciate any response. Thanks.
var menu = document.querySelector(".toggle_menu");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mobile_menu");
var y = document.getElementById('container_overlay');
// For var x
if (!x.classList.contains("active")) {
x.classList.toggle("active");
menu.innerHTML = '<i class="icn_toggle fa-solid fa-xmark">Close Menu</i>';
} else {
x.classList.remove("active");
menu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (!y.classList.contains("on")) {
y.classList.toggle("on");
} else {
y.classList.remove("on");
}
}
// Permette la chiusura del menu cliccando fuori dall'area
document.addEventListener("click", function (e) {
var x = document.getElementById("mobile_menu");
var y = document.getElementById('container_overlay');
// For var x
if (e.target.id !== "mobile_menu" && x.classList.contains("active")) {
x.classList.toggle("active");
menu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (e.target.id !== "mobile_menu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
});
.example_content {
display: flex;
align-content: center;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.example_content > a {
background: gray;
padding: 10px;
color:#fff;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Logout Header*/
.logout_header {
display: flex;
justify-content: space-between;
}
.btn {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 4px;
padding: 4px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
.toggle_menu {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 20%;
background: none!important;
box-shadow: none!important;
position: absolute;
top: 20px;
right: 20px;
}
.icn_toggle {
margin: 0;
font-size: 26px;
z-index: 1000;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
#container_overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
}
#container_overlay.on {
opacity: 1;
}
.content_menu {
display: block;
width: 100%;
}
#mobile_menu {
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: relative;
width: 75%;
height: 100vh;
transition: .3s;
}
#mobile_menu.active {
left: 0;
}
<div class="example_content">
This is an example of my website content
Stackoverflow Link
</div>
<button onclick="mobile_menu(event)" class="toggle_menu"><i class="icn_toggle fa-solid fa-bars">Open Menu</i></button>
<div id="container_overlay">
<div id="mobile_menu">
<div class="content_menu">
{% if function( 'is_user_logged_in') %}
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
{% else %}{% endif %}
<div class="logout_header">
<div class="btn login">Login</div>
<div class="btn singup">Singup</div>
</div>
<hr class="solid" />
{% if function( 'is_user_logged_in') %}
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>
give z-index:-1 to #container_overlay and z-index:999 to #container_overlay.on. hope this helps
I found a solution by looking around on stackoverflow. I found this post: Transitions on the CSS display property some users recommend using the visibility parameter: hidden to visible. It worked for me. Below I put the correct code that I am using.
var menu = document.querySelector(".toggle_menu");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mobile_menu");
var y = document.getElementById('container_overlay');
// For var x
if (!x.classList.contains("active")) {
x.classList.toggle("active");
menu.innerHTML = '<i class="icn_toggle fa-solid fa-xmark">Close Menu</i>';
} else {
x.classList.remove("active");
menu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (!y.classList.contains("on")) {
y.classList.toggle("on");
} else {
y.classList.remove("on");
}
}
// Permette la chiusura del menu cliccando fuori dall'area
document.addEventListener("click", function (e) {
var x = document.getElementById("mobile_menu");
var y = document.getElementById('container_overlay');
// For var x
if (e.target.id !== "mobile_menu" && x.classList.contains("active")) {
x.classList.toggle("active");
menu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (e.target.id !== "mobile_menu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
});
.example_content {
display: flex;
align-content: center;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.example_content > a {
background: gray;
padding: 10px;
color:#fff;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Logout Header*/
.logout_header {
display: flex;
justify-content: space-between;
}
.btn {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 4px;
padding: 4px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
.toggle_menu {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 20%;
background: none!important;
box-shadow: none!important;
position: absolute;
top: 20px;
right: 20px;
}
.icn_toggle {
margin: 0;
font-size: 26px;
z-index: 1000;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
#container_overlay {
visibility: hidden; /*Add This*/
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
}
#container_overlay.on {
visibility: visible; /*and this*/
opacity: 1;
}
.content_menu {
display: block;
width: 100%;
}
#mobile_menu {
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: relative;
width: 75%;
height: 100vh;
transition: .3s;
}
#mobile_menu.active {
left: 0;
}
<div class="example_content">
This is an example of my website content
Stackoverflow Link
</div>
<button onclick="mobile_menu(event)" class="toggle_menu"><i class="icn_toggle fa-solid fa-bars">Open Menu</i></button>
<div id="container_overlay">
<div id="mobile_menu">
<div class="content_menu">
{% if function( 'is_user_logged_in') %}
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
{% else %}{% endif %}
<div class="logout_header">
<div class="btn login">Login</div>
<div class="btn singup">Singup</div>
</div>
<hr class="solid" />
{% if function( 'is_user_logged_in') %}
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>
Edit with solution
I have a sidebar menu that appears and disappears when I click on the button. Two problems were occurring in the menu, here they are listed below:
The menu closes by clicking outside the #mobile_menu div and that's what I want. However the menu also closes by clicking inside div #mobile_menu, I don't want that to happen, clicking inside this div the menu should not close.
The second aspect is that when the menu is open, the back page is free to scroll up and down, is there any way to prevent this ?
I solved these problems thanks to the intervention of #moronator
var mobileMenu = document.querySelector("#toggle_menu");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mobile_menu");
var y = document.getElementById("container_overlay");
var z = document.getElementsByTagName("body")[0];
// For var x - Show & Hide Menu
if (!x.classList.contains("show")) {
x.classList.toggle("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-xmark">Close Menu</i>';
} else {
x.classList.remove("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y Show & Hide Overlay
if (!y.classList.contains("on")) {
y.classList.toggle("on");
} else {
y.classList.remove("on");
}
// For var z Prevent Page scroll with overflow
if (!z.classList.contains("ppscroll")) {
z.classList.toggle("ppscroll");
} else {
z.classList.remove("ppscroll");
}
}
// Close Menu clicking on container_overlay
document.getElementById("container_overlay").addEventListener("click", function (e) {
var x = document.getElementById("mobile_menu");
var y = document.getElementById("container_overlay");
var z = document.getElementsByTagName("body")[0];
// For var x
if (e.target.id !== "mobile_menu" && x.classList.contains("show")) {
x.classList.toggle("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (e.target.id !== "mobile_menu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
// For var z
if (e.target.id !== "mobile_menu" && z.classList.contains("ppscroll")) {
z.classList.toggle("ppscroll");
}
});
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Logout Header*/
.logout_header {
display: flex;
justify-content: space-between;
}
.mob {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 4px;
padding: 4px;
}
/*Text Link css*/
.mob_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.mob_menu.item:hover > a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
#toggle_menu {
width: 20%;
color: #000;
position: absolute;
right: 20px;
top: 20px;
}
.icn_toggle, .icn_toggle::before, .icn_toggle::after {
margin: 0;
z-index: 1000;
font-size: 24px;
}
/*Icon Items Menu*/
.icn_items:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_items {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
#container_overlay {
visibility: hidden;
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
height: 100vh;
}
#container_overlay.on {
visibility: visible;
opacity: 1;
}
.content_menu {
display: block;
width: 100%;
}
#mobile_menu {
top: 0;
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: fixed;
width: 75%;
height: 100vh;
transition: .3s;
}
#mobile_menu.show {
left: 0;
}
.ppscroll {
overflow: hidden;
}
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div onclick="mobile_menu(event)" id="toggle_menu"><i class="icn_toggle fa-solid fa-bars">Open Menu</i></div>
<div id="mobile_menu">
<div class="content_menu">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<div class="logout_header">
<a class="mob btn-login" href="#"><span>Login</span></a>
<a class="mob btn-singup" href="#"> <span>Singup</span></a>
</div>
<hr class="solid" />
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="container_overlay"></div>
Original code with errors listed
var mobileMenu = document.querySelector("#toggle_menu");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mobile_menu");
var y = document.getElementById("container_overlay");
// For var x
if (!x.classList.contains("show")) {
x.classList.toggle("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-xmark">Close Menu</i>';
} else {
x.classList.remove("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (!y.classList.contains("on")) {
y.classList.toggle("on");
} else {
y.classList.remove("on");
}
}
// Close Menu clicking on container_overlay
document.addEventListener("click", function (e) {
var x = document.getElementById("mobile_menu");
var y = document.getElementById("container_overlay");
// For var x
if (e.target.id !== "mobile_menu" && x.classList.contains("show")) {
x.classList.toggle("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (e.target.id !== "mobile_menu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
});
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
cursor: not-allowed;
pointer-events: none !important;
border: 1px solid red;
}
.error {
color: red;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Logout Header*/
.logout_header {
display: flex;
justify-content: space-between;
}
.mob {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 4px;
padding: 4px;
}
/*Text Link css*/
.mob_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.mob_menu.item:hover > a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
#toggle_menu {
display: flex;
align-content: flex-end;
justify-content: center;
align-items: flex-end;
width: 20%;
color: #000;
position: absolute;
top 20px;
right: 20px;
}
.icn_toggle, .icn_toggle::before, .icn_toggle::after {
margin: 0;
z-index: 1000;
font-size: 24px;
}
/*Icon Items Menu*/
.icn_items:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_items {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
#container_overlay {
visibility: hidden;
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
background: #000000b8;
opacity: 0;
transition: 0.3s;
height: 100vh;
}
#container_overlay.on {
visibility: visible;
opacity: 1;
}
.content_menu {
display: block;
width: 100%;
}
#mobile_menu {
top: 0;
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: fixed;
width: 75%;
height: 100vh;
transition: .3s;
}
#mobile_menu.show {
left: 0;
}
<div onclick="mobile_menu(event)" id="toggle_menu"><i class="icn_toggle fa-solid fa-bars"></i>Menu</div>
<div id="mobile_menu">
<div class="content_menu">
<div class="user_menu header">
<span class="display name">Hello [display_name]</span>
<span class="display mail">[display_email]</span>
<span class="error">clicking here closes the menu, it shouldn't happen.
</div>
<div class="logout_header">
<a class="mob btn-login" href="#"><span>Login</span></a>
<a class="mob btn-singup" href="#"> <span>Singup</span></a>
</div>
<hr class="solid" />
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="mob_menu item">
<a href="libreria">
<i class="icn_items fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="container_overlay"></div>
Just add the event listener to your overlay container instead of your whole document:
var mobileMenu = document.querySelector("#toggle_menu");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mobile_menu");
var y = document.getElementById("container_overlay");
// For var x
if (!x.classList.contains("show")) {
x.classList.toggle("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-xmark">Close Menu</i>';
} else {
x.classList.remove("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (!y.classList.contains("on")) {
y.classList.toggle("on");
} else {
y.classList.remove("on");
}
}
// Close Menu clicking on container_overlay
// ------- I JUST CHANGED THE FOLLOWING LINE -------
document.getElementById("container_overlay").addEventListener("click", function (e) {
var x = document.getElementById("mobile_menu");
var y = document.getElementById("container_overlay");
// For var x
if (e.target.id !== "mobile_menu" && x.classList.contains("show")) {
x.classList.toggle("show");
mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
}
// For var y
if (e.target.id !== "mobile_menu" && y.classList.contains("on")) {
y.classList.toggle("on");
}
});
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
cursor: not-allowed;
pointer-events: none !important;
border: 1px solid red;
}
.error {
color: red;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Logout Header*/
.logout_header {
display: flex;
justify-content: space-between;
}
.mob {
display: flex;
width: 49.5%;
justify-content: center;
background: #fbfbfb;
border: 1px solid #eee;
border-radius: 4px;
padding: 4px;
}
/*Text Link css*/
.mob_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.mob_menu.item:hover > a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
#toggle_menu {
display: flex;
align-content: flex-end;
justify-content: center;
align-items: flex-end;
width: 20%;
color: #000;
position: absolute;
top 20px;
right: 20px;
}
.icn_toggle, .icn_toggle::before, .icn_toggle::after {
margin: 0;
z-index: 1000;
font-size: 24px;
}
/*Icon Items Menu*/
.icn_items:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_items {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
#container_overlay {
visibility: hidden;
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
background: #000000b8;
opacity: 0;
transition: 0.3s;
height: 100vh;
}
#container_overlay.on {
visibility: visible;
opacity: 1;
}
.content_menu {
display: block;
width: 100%;
}
#mobile_menu {
top: 0;
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: fixed;
width: 75%;
height: 100vh;
transition: .3s;
}
#mobile_menu.show {
left: 0;
}
<div onclick="mobile_menu(event)" id="toggle_menu"><i class="icn_toggle fa-solid fa-bars"></i>Menu</div>
<div id="mobile_menu">
<div class="content_menu">
<div class="user_menu header">
<span class="display name">Hello [display_name]</span>
<span class="display mail">[display_email]</span>
<span class="error">clicking here closes the menu, it shouldn't happen.
</div>
<div class="logout_header">
<a class="mob btn-login" href="#"><span>Login</span></a>
<a class="mob btn-singup" href="#"> <span>Singup</span></a>
</div>
<hr class="solid" />
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="mob_menu item">
<a href="libreria">
<i class="icn_items fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="mob_menu item">
<a href="#">
<i class="icn_items fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="container_overlay"></div>
I have a side menu that appears when I click on a div tag. Everything works fine. However I would like to change <div id="togglek"></div> to <button id="togglek" onclick"MyFunction()"></button> I tried, but with the button tag the menu doesn't appear.
Is there any way to change from div to button? I'm sure the script will need to be changed a bit, but I don't know how. Sorry, I'm new and trying to learn as much as possible.
I appreciate any response, thanks.
const togglek = document.getElementById('togglek');
const sidenav = document.getElementById('sidenav');
document.onclick = function(e){
if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
togglek.classList.remove('btnactv');
sidenav.classList.remove('active');
overlay.classList.remove('bgover');
}
}
togglek.onclick = function(){
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
/*Overlay*/
#overlay {
position: fixed;
height: 100vh;
top: 0;
background: #000;
z-index: 999;
transition: 0.3s;
}
#overlay.bgover {
left: 0px;
width: 100%;
background: #000000d1;
}
/*Toggle Button*/
#togglek {
display: flex;
align-content: center;
justify-content: center;
align-items: flex-end;
font-size: 18px;
margin: 10px;
padding: 10px;
position: absolute;
top: 10px;
right: 20px;
border: 1px solid black;
}
#togglek::before {
font-family: fontAwesome;
content:'Open';
color: #000;
}
#togglek.btnactv::before {
font-family: fontAwesome;
content:'Close';
color: #000;
z-index:1000;
}
/*Sidebar*/
.sidenav_box {
margin-top: 5%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left:-100%;
width: 80%;
height: 100vh;
background: #fbfbfb;
transition: 0.3s;
z-index: 1000;
}
#sidenav.active {
left: 0px;
width: 80%;
background: #fbfbfb;
box-shadow: 5px 0px 15px 0px #00000021;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
<div id="togglek"></div>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Hello User</span>
<span class="display mail">example#gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="overlay"></div>
is this what u mean?
const togglek = document.getElementById('togglek');
const sidenav = document.getElementById('sidenav');
document.onclick = function(e){
if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
togglek.classList.remove('btnactv');
sidenav.classList.remove('active');
overlay.classList.remove('bgover');
}
}
function pressToShow() {
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
/*Overlay*/
#overlay {
position: fixed;
height: 100vh;
top: 0;
background: #000;
z-index: 999;
transition: 0.3s;
}
#overlay.bgover {
left: 0px;
width: 100%;
background: #000000d1;
}
/*Toggle Button*/
#togglek {
display: flex;
align-content: center;
justify-content: center;
align-items: flex-end;
font-size: 18px;
margin: 10px;
padding: 10px;
position: absolute;
top: 10px;
right: 20px;
border: 1px solid black;
}
/*Sidebar*/
.sidenav_box {
margin-top: 5%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left:-100%;
width: 80%;
height: 100vh;
background: #fbfbfb;
transition: 0.3s;
z-index: 1000;
}
#sidenav.active {
left: 0px;
width: 80%;
background: #fbfbfb;
box-shadow: 5px 0px 15px 0px #00000021;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
<button id="togglek" onclick=pressToShow()>PRESS TO SHOW</div>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Hello User</span>
<span class="display mail">example#gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="overlay"></div>
It seems your issue is that you aren't defining a function of myFunction you can simply change the div to a button and use the existing onclick code and it still works as shown:
const togglek = document.getElementById('togglek');
const sidenav = document.getElementById('sidenav');
document.onclick = function(e){
if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
togglek.classList.remove('btnactv');
sidenav.classList.remove('active');
overlay.classList.remove('bgover');
}
}
togglek.onclick = function(){
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
/*Overlay*/
#overlay {
position: fixed;
height: 100vh;
top: 0;
background: #000;
z-index: 999;
transition: 0.3s;
}
#overlay.bgover {
left: 0px;
width: 100%;
background: #000000d1;
}
/*Toggle Button*/
#togglek {
display: flex;
align-content: center;
justify-content: center;
align-items: flex-end;
font-size: 18px;
margin: 10px;
padding: 10px;
position: absolute;
top: 10px;
right: 20px;
border: 1px solid black;
}
#togglek::before {
font-family: fontAwesome;
content:'Open';
color: #000;
}
#togglek.btnactv::before {
font-family: fontAwesome;
content:'Close';
color: #000;
z-index:1000;
}
/*Sidebar*/
.sidenav_box {
margin-top: 5%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left:-100%;
width: 80%;
height: 100vh;
background: #fbfbfb;
transition: 0.3s;
z-index: 1000;
}
#sidenav.active {
left: 0px;
width: 80%;
background: #fbfbfb;
box-shadow: 5px 0px 15px 0px #00000021;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
<button id="togglek"/>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Hello User</span>
<span class="display mail">example#gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="overlay"></div>
Seems to be working for me. Here's the jsfiddle
In the html I just changed
<div id="togglek"></div>
to
<button id="togglek" onclick="MyFunction()"></button>
And in the js:
togglek.onclick = function(){
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
to
function MyFunction() {
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
I have a question.
I am creating a website with the following code.
There is an error with the snippet. It's a link.
gruus.cafe24.com
There are still a lot of problems, and I'm testing what I want to do... There are parts that I can't solve for too long, so I ask for help.
If you scroll through the black area on the right, you will see the white subject text at the bottom. I wanted to give the effect of multiple sheets of paper overlapping and then being pulled out one by one and scrolled.
The white subject text at the bottom is fake.
There is the same text in the box that scrolls to the bottom, and when the box is displayed on the screen by scrolling through the screen, the fake text disappears at the same speed.
-> But the speed is not exactly right. And it's pretty good with a 1440 x 768 browser(mac book 13inch), but if you change the window size, it'll mess up.
The following part is also a problem, and I'm curious about how it works, but I'm still testing it.
As soon as the box touches the top of the screen, the goal is to make the fake title text appear in the same location (fixed) and pile up again on the top of the screen.
In summary, at first, it is pulled out one by one from the bottom and scrolled up, then piled up at the top of the screen, and when you scroll again, it is pulled out one by one and moved down and piled up...
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
var key = $('.cover-line').height();
var keyfour = eval(key*4);
var keytwo = eval(key*2);
var keyeight = eval(key*8);
var one = $('.box.firstbox').position().top + $('.box.one').height() - $('.cover-line').height();
var two = $('.box.one').position().top + $('.box.two').height() - $('.cover-line').height();
var three = $('.box.two').position().top + $('.box.three').height() - keyfour;
var four = $('.box.three').position().top + $('.box.four').height() - keyfour;
var five = $('.box.four').position().top + $('.box.five').height() - keyfour;
var six = $('.box.five').position().top + $('.box.six').height() - keyfour;
var seven = $('.box.six').position().top + $('.box.seven').height() - keyfour;
var eight = $('.box.seven').position().top + $('.box.eight').height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= one)
{
$(".cover-line.one").addClass("active");
$(".cover-line.two").removeClass("active");
}
else if (scroll <= two)
{
$(".cover-line.two").addClass("active");
$(".cover-line.three").removeClass("active");
}
else if (scroll <= three)
{
$(".cover-line.three").addClass("active");
$(".cover-line.four").removeClass("active");
}
else if (scroll <= four)
{
$(".cover-line.four").addClass("active");
$(".cover-line.five").removeClass("active");
}
else if (scroll <= five)
{
$(".cover-line.five").addClass("active");
$(".cover-line.six").removeClass("active");
}
else if (scroll <= six)
{
$(".cover-line.six").addClass("active");
$(".cover-line.seven").removeClass("active");
}
else if (scroll <= seven)
{
$(".cover-line.seven").addClass("active");
$(".cover-line.eight").removeClass("active");
}
else if (key = eight)
{
$(".cover-line.eight").addClass("active");
}
});
});
$(document).ready(function() {
$(window).scroll(function(){
if(window.scrollY==0){
$('.cover-line.one').removeClass('active');
} else {
}
});
});
</script>
* {
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0
}
*:focus {
outline: none;
}
*::selection {
background-color: transparent;
color: #9fa0a0;
}
html{
font-family: 'NeueHaasGroteskDisp Pro', 'Noto Sans KR', sans-serif;
font-weight: normal;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
body::-webkit-scrollbar {
display: none;
width: 0px;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 5px;
}
body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
background-color: #fff;
overflow-x: hidden;
}
a {
text-decoration: none;
color: #000;
cursor: pointer;
transition: color .3s;
}
a.opacity {
transition: color .3s;
color: #9fa0a0;
}
main.main {
display: block;
position: relative;
width: 100%;
height: 100vh;
/* padding: 0.5vw; */
}
.leftbox {
display: inline-block;
position: fixed;
width: calc(50% - 1vw);
height: 100%;
min-height: 100vh;
float: left;
padding: 0.5vw;
font-size: 1.5vw;
line-height: 1.8vw;
font-weight: bold;
left: 0;
top: 0;
}
.rightbox {
display: inline-block;
position: absolute;
width: 50%;
height: auto;
min-height: 100vh;
float: left;
background: #000;
color: #fff;
/* padding: 0.5vw; */
left: 50%;
}
.box-header {
display: inline-block;
position: relative;
width: auto;
/*height: 2.2vw;*/
font-size: 1.5vw;
line-height: 2.4vw;
padding-left: 0.5vw;
font-weight: bold;
}
.cover-line {
display: block;
background: #000;
height: 2.2vw;
/*border-bottom: 2px solid #fff;*/
/* width: 100%; */
/* height: auto; */
}
.box-date {
display: inline-block;
position: relative;
width: auto;
/*height: 2.2vw;*/
font-size: 1.5vw;
line-height: 2.4vw;
float: right;
padding-right: 0.5vw;
font-weight: bold;
}
.box {
display: block;
position: relative;
/* width: 100%; */
height: calc(100vh - (2.2vw*8));
/* border-bottom: 2px solid #FFF; */
}
.box.firstbox {
position: relative;
}
.box-content {
display: block;
position: relative;
width: 100%;
height: auto;
}
.box-content video {
display: block;
position: relative;
width: auto;
max-width: 100%;
padding-top: 2.2vw;
height: calc(100vh - (2.2vw*10));
/* top: 50%; */
left: 50%;
transform: translateX(-50%);
}
.menubox {
display: block;
position: fixed;
bottom: 0.5vw;
width: auto;
height: auto;
}
.text {
display: block;
position: relative;
width: auto;
white-space: pre-line;
padding-left: 0.5vw;
font-size: 1.5vw;
line-height: 1.5vw;
top: 2.2vw;
z-index: 9;
}
.contact {
font-weight: bold;
cursor: pointer;
}
.firstbox .line {
display: block;
position: fixed;
top: 0;
width: 50%;
height: 2.2vw;
z-index: 9999999;
background: #000;
}
.intro {
display: block;
position: relative;
width: 100%;
height: auto;
white-space: pre-line;
}
.menu {
display: table;
position: relative;
width: auto;
height: auto;
cursor: pointer;
}
/*.menu.checked {
font-weight: bold;
}*/
.prev.on, #next.on {
display: inline-block;
}
.prev, #next {
display: none;
}
.contact:hover {
color: #9fa0a0;
}
.cover-header {
display: block;
position: fixed;
width: 100%;
height: auto;
bottom: 0;
z-index: 9999999;
/*border-top: 2px solid #fff;*/
}
.cover-line.active {
opacity: 0;
}
.cover-line.one.fix {
top: 2.2vw;
position: fixed;
opacity: 1;
}
<div class="leftbox">
<span class="intro">test
</span>
<span class="menubox">
<span class="menu selected checked">Selected</span>
<span class="menu 2022">2022</span>
<span class="menu 2021">2021</span>
<span class="menu 2020">2020</span>
</span></div>
<div class="rightbox">
<div class="box firstbox">
<div class="line">
<span class="box-header">test 1</span>
<span class="box-date">Feb 2022</span>
</div>
<span class="box-content">
<nav class="text">test text</nav>
<video width="100%" height="100%" muted="" autoplay="" playsinline="" loop="" preload="auto"><source src="http://jungdayoung.kr/sourcebox/dpgp.mp4"></video>
</span>
</div>
<div class="box one">
<div class="line">
<span class="box-header">test 2</span>
<span class="box-date">Jan 2022</span>
</div>
<span class="box-content"></span>
</div>
<div class="box two">
<div class="line">
<span class="box-header">test 3</span>
<span class="box-date">Jan 2022</span>
</div>
<span class="box-content"></span>
</div>
<div class="box three">
<div class="line">
<span class="box-header">test 4</span>
<span class="box-date">Oct 2021</span>
</div>
<span class="box-content"></span>
</div>
<div class="box four">
<div class="line">
<span class="box-header">test 5</span>
<span class="box-date">Sept 2021</span>
</div>
<span class="box-content"></span>
</div>
<div class="box five">
<div class="line">
<span class="box-header">test 6</span>
<span class="box-date">Mar 2021</span>
</div>
<span class="box-content"></span>
</div>
<div class="box six">
<div class="line">
<span class="box-header">test 7</span>
<span class="box-date">Jan 2021</span>
</div>
<span class="box-content"></span>
</div>
<div class="box seven">
<div class="line">
<span class="box-header">test 8</span>
<span class="box-date">Dec 2020</span>
</div>
<span class="box-content"></span>
</div>
<div class="box eight">
<div class="line">
<span class="box-header">test 9</span>
<span class="box-date">Dec 2020</span>
</div>
<span class="box-content"></span>
</div>
<!-- header -->
<div class="cover-header">
<span class="cover-line one"><span class="box-header">test 2</span><span class="box-date">Jan 2022</span></span>
<span class="cover-line two"><span class="box-header">test 3</span><span class="box-date">Jan 2022</span></span>
<span class="cover-line three"><span class="box-header">test 4</span><span class="box-date">Oct 2021</span></span>
<span class="cover-line four"><span class="box-header">test 5</span><span class="box-date">Sept 2021</span></span>
<span class="cover-line five"><span class="box-header">test 6</span><span class="box-date">Mar 2021</span></span>
<span class="cover-line six"><span class="box-header">test 7</span><span class="box-date">Jan 2021</span></span>
<span class="cover-line seven"><span class="box-header">test 8</span><span class="box-date">Dec 2020</span></span>
<span class="cover-line eight"><span class="box-header">test 9</span><span class="box-date"><Dec 2020/span></span>
</div>
</div>