Issue
I have a sidenav menu with some Js, I would like to add the overlay but I don't know how to do it, sorry but I'm a beginner. I tried several ways without success, even with a div that closes all content, but then I took it out because it broke the menu function. Can someone help me ? I appreciate any response, thanks.
const toggle = document.getElementById('toggle');
const sidenav = document.getElementById('sidenav');
document.onclick = function(e){
if(e.target.id !== 'sidenav' && e.target.id !== 'toggle' ) {
toggle.classList.remove('active');
sidenav.classList.remove('active');
}
}
toggle.onclick = function(){
toggle.classList.toggle('active');
sidenav.classList.toggle('active');
}
#toggle {
display: flex;
align-content: center;
justify-content: flex-end;
align-items: center;
font-size: 18px;
margin: 10px;
padding: 10px;
color: black;
border: 1px solid black;
}
#toggle::before {
font-family: fontAwesome;
content:'Menu Closed';
color: black;
}
#toggle.active::before {
font-family: fontAwesome;
content:'Menu Open';
color: black;
}
/*Sidebar*/
.sidenav_box {
margin-top: 10%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left:-100%;
width: 80%;
height: 100vh;
background: black;
transition: 0.3s;
z-index: 999;
}
#sidenav.active {
left: 0px;
width: 80%;
}
<div id="toggle"></div>
<div id="sidenav">
<div class="sidenav_box">
<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>
Solution
When you say div with overlay, do you mean having the background of your nav menu be semi-transparent like so? If so you just need the opacity
attribute but you might need to drop the z-index
down if you want it to appear behind your other elements like the nav items.
const toggle = document.getElementById('toggle');
const sidenav = document.getElementById('sidenav');
const overlay = document.getElementById('contentOverlay');
document.onclick = function(e) {
if (e.target.id !== 'sidenav' && e.target.id !== 'toggle') {
toggle.classList.remove('active');
sidenav.classList.remove('active');
overlay.classList.remove('active');
}
}
toggle.onclick = function() {
toggle.classList.toggle('active');
sidenav.classList.toggle('active');
overlay.classList.toggle('active');
}
#toggle {
display: flex;
align-content: center;
justify-content: flex-end;
align-items: center;
font-size: 18px;
margin: 10px;
padding: 10px;
color: black;
border: 1px solid black;
}
#toggle::before {
font-family: fontAwesome;
content: 'Menu Closed';
color: black;
}
#toggle.active::before {
font-family: fontAwesome;
content: 'Menu Open';
color: black;
}
/*Sidebar*/
.sidenav_box {
margin-top: 10%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left: -100%;
width: 50%;
height: 100vh;
background: black;
opacity: 1;
transition: 0.3s;
z-index: 999;
}
#sidenav.active {
left: 0px;
width: 50%;
}
#contentOverlay {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
opacity: 1;
object-fit: cover;
transition: 0.3s;
z-index: 1;
}
#contentOverlay.active {
left: 0px;
width: 100%;
}
<div id="toggle"></div>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
</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>
<img src="https://i.imgur.com/rsSBOSd.jpeg" id="contentOverlay" />
Answered By - AStombaugh Answer Checked By - Marilyn (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.