I've been trying to figure out how to make a menu button that functions similarly to that of YouTube's, where once clicked the rest of the page is darker and inaccessible until the button is clicked once more and the menu retracts. If anyone could help with this, I would greatly appreciate it. (and if possible, still retaining most or all of my original code). :)
<body>
<div class = 'headerBar'>
<style>
.headerBar {
position: absolute;
width: 100%;
height: 80px;
top: 0px;
left: 0px;
background-color: #b0b0b0;
}
</style>
</div>
<div class = 'headerStrip'>
<style>
.headerStrip {
position: absolute;
width: 100%;
height: 5px;
top: 80px;
left: 0px;
background-color: #5e00bc
}
</style>
</div>
<div class = 'bodyBar'>
<style>
.bodyBar {
position: absolute;
width: 100%;
height: 100%;
top: 85px;
left: 0px;
background-color: #000000
}
</style>
</div>
<div class = 'jobLinks'>
<li><a class = 'find' href = '#'>Find</a></li>
<style>
.jobLinks {
text-decoration: none;
list-style: none;
}
.find {
position: absolute;
width: 80px;
height: 40px;
top: 30px;
left: 300px;
font-family: 'comfortaa';
font-size: 18px;
font-weight: 800;
color: #000000;
text-decoration: none;
text-align: center;
transition: ease-out 0.4s;
background-color: #e0e0e0;
}
.find:hover {
color: #5e00bc;
}
</style>
</div>
<div class = 'menu'>
<button class = 'menuButton'></button>
<div class = 'linkList'>
<ul>
<li><a class = 'links' href = '#'>Link 1</a></li>
<li><a class = 'links' href = '#'>Link 2</a></li>
<li><a class = 'links' href = '#'>Link 3</a></li>
<li><a class = 'links' href = '#'>Link 4</a></li>
<li><a class = 'links' href = '#'>Link 5</a></li>
<li><a class = 'links' href = '#'>Link 6</a></li>
<li><a class = 'links' href = '#'>Link 7</a></li>
</ul>
</div>
<style>
.menuButton {
position: absolute;
width: 30px;
height: 30px;
top: 25px;
left: 1303px;
border: none;
outline: none;
transition: ease-out 0.5s;
background-image: url('/Images/Menu_Icon.png');
background-color: #e0e0e0;
cursor: pointer;
}
.links {
font-family: 'comfortaa';
font-size: 18px;
font-weight: 500;
color: #000000;
text-decoration: none;
transition: ease-out 0.4s;
}
.links:hover {
color: #5e00bc;
}
.linkList {
position: fixed;
width: 150px;
height: 100%;
right: -150px;
top: 85px;
transition: ease-out 0.5s;
background: #e0e0e0;
}
.linkList ul li {
list-style: none;
padding: 15px;
}
.menuButton:focus ~ .linkList {
right: 0px;
}
</style>
<script>
menuBtn = document.getElementsByClassName('menuButton')[0];
menuBtn.addEventListener('click', function() {
menu = document.getElementsByClassName('linkList')[0];
menu.style.webkitTransition = '0.6s';
if (menu.style.right == '0px') {
menu.style.right = '-150px';
} else {
menu.style.right = '0px';
}
});
</script>
</div>
</body>
</html>CodePudding user response：
Sorry OP, I know you asked for minimal change to your markup but what you were doing just seemed so backwards to me (also your snippet wasn't working for me??) -- take a look at the script in my snippet, I've set this up using click delegation on the body. This will detect every click anywhere on the page, but will only toggle the class if an element with id="toggle" is clicked.
As for the other parts, I had to add an overlay div which acts as the backdrop to the link list, this will cover the content. The overlay and the link list has z-index: 999 to make sure it will be above any absolute/relative/fixed position elements (so long as it has a z-index of less than 999). It doesn't cover the menu as this is where the button is to hide the overlay again, although clicking on the overlay will also hide it
I've also used display: grid a lot as this is much easier for the browser to calculate before painting than all the absolute positioned elements you had before
const main = document.getElementById('main');
document.addEventListener('click', function(e) {
e.target.id === 'toggle' && main.classList.toggle('active');
e.target.id === 'overlay' && main.classList.toggle('active');
},false );* { box-sizing: border-box } body { margin: 0 }
main {
display: grid;
grid-template-rows: 85px 1fr;
height: 100vh;
overflow: hidden
}
header {
grid-area: 1/1/2/2;
display: grid;
background-color: #b0b0b0;
border-bottom: 5px solid #5e00bc
}
#find, #toggle {
grid-area: 1/1/-1/-1;
margin: auto;
padding: 0.5em 1em;
background-color: #e0e0e0;
border: 0;
border-radius: 0.375em;
cursor: pointer;
font-family: 'Comfortaa', cursive;
font-size: 18px;
font-weight: 800;
line-height: 1;
user-select: none; -moz-user-select: none; -webkit-user-select: none;
transition: color 400ms 0ms ease-in-out
}
#find:hover, #toggle:hover { color: #5e00bc }
#toggle {
background-image: url("data:image/svg xml,");
background-position: center;
background-repeat: no-repeat;
margin-right: 1em
}
section {
grid-area: 2/1/3/2;
background-color: black;
color: white;
font-family: 'comfortaa';
overflow: scroll;
padding: 1.5em
}
#overlay, #linkList {
grid-area: 2/1/3/2;
z-index: 999;
transform: translateY( 100vh );
transition: transform 600ms 0ms ease-in-out
}
#overlay {
background: #5e00bc;
opacity: 0.825
}
#linkList {
display: flex;
flex-direction: column;
margin: auto;
max-height: 100%;
overflow: scroll;
padding: 0 1em
}
#linkList a {
background-color: rgba(0, 0, 0, 0.5 );
border-radius: 0.375em;
color: white;
font-family: 'comfortaa';
font-size: 18px;
font-weight: 700;
margin-bottom: 0.25em;
padding: 0.5em;
text-decoration: none;
transition: background-color 400ms 0ms ease-in-out, color 400ms 0ms ease-in-out, transform 400ms 0ms ease-in-out
}
#linkList a:hover {
color: #5e00bc;
background-color: white;
transform: scale(1.075)
}
#linkList a:first-child { margin-top: 1em }
#linkList a:last-child { margin-bottom: 1em }
#main.active #overlay,
#main.active #linkList {
transform: translateY( 0 );
}<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&display=swap" rel="stylesheet">
<main id="main">
<header>
<button id="find">Find</button>
<button id="toggle"> </button>
</header>
<section>
<p>Nunc a porta a lacus a vitae a vulputate a a a class scelerisque sociosqu parturient habitant a quam platea nec a purus sem accumsan dui mauris dis. A pharetra mi porta parturient ultrices ac nisi ad aliquet taciti ullamcorper consequat ullamcorper conubia rhoncus magnis a condimentum risus in at suspendisse cum himenaeos non per ante.</p>
</section>
<div id="overlay"></div>
<div id='linkList'>
<a href='#'>This is Link 1</a>
<a href='#'>This is Link 2</a>
<a href='#'>This is Link 3</a>
<a href='#'>This is Link 4</a>
<a href='#'>This is Link 5</a>
<a href='#'>This is Link 6</a>
<a href='#'>This is Link 7</a>
</div>
</main>CodePudding user response：
I can only think of adding a that acts as an overlay that covers the entire page indexed at the back of the menu, at 100vh/vw with fixed position with display:none by default but onclick, you'll change the display property inline/inline-block.