Menu
In the first place I would like to appologize if my english is not properly but right now I am having an issue where I am trying to make the hamburger menu where the code will be listed below, to be closed when the anchor( tag) is clicked. I have the code where the menu is being opened, but I am looking to close also have it closed when the anchor is clicked and to be switched on the selected anchor using the section tag.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: gray;
}
.menu__toggler
{
position: absolute;
top: 20px;
left: 50%;
z-index: 999;
height: 28px;
width: 28px;
outline: none;
cursor: pointer;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
}
.menu__toggler span, .menu__toggler span::before, .menu__toggler span::after
{
position: absolute;
content: "";
width: 28px;
height: 2.5px;
background: #fafafa;
border-radius: 20px;
-webkit-transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu__toggler span::before
{
top: -8px;
}
.menu__toggler span::after
{
top: 8px;
}
.menu__toggler.active > span
{
background: transparent;
}
.menu__toggler.active > span::before, .menu__toggler.active > span::after
{
background: white;
top: 0px;
}
.menu__toggler.active > span::before
{
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.menu__toggler.active > span::after
{
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu
{
position: absolute;
left: -30%;
z-index: 998;
color: #005c9c;
background: rgba(250, 250, 250, 0.7);
-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
width: 30%;
height: 100%;
padding: 100px;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
}
@media only screen and (max-width: 900px)
{
.menu
{
width: 3250px;
left: -3250px;
padding: 50px;
}
}
.menu.active
{
left: 0;
}
.menu p
{
font-size: 1.4rem;
margin-bottom: 1rem;
}
*, *::before, *::after
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
min-height: 100vh;
background-color: #1d1f20;
font-family: "K2D", sans-serif;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
section
{
display: none;
}
section:target
{
display: block;
}
</style>
</head>
<body>
<div class="menu">
<div class="test2" id="menu">
<ul>
<li><a href="#default" class="test">Main menu</a></li>
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
</ul>
</div>
<div class="test3">
<ul>
<li><a href="#default" class="test">Second menu</a></li>
<li><a href="#test3">test3</a></li>
<li><a href="#test4">test4</a></li>
</ul>
</div>
</div>
<div class="menu__toggler">
<span></span>
</div>
<section id="test1">
test1
</section>
<section id="test2">
test2
</section>
<script type="text/javascript">
const toggler = document.querySelector('.menu__toggler');
const menu = document.querySelector('.menu');
toggler.addEventListener('click', () =>
{
toggler.classList.toggle('active');
menu.classList.toggle('active');
})
</script>
</body>
</html>
I am waiting your opinions to see if we can do something about this :D
358
Add another event listener to catch the click of the HTML anchors and use the classList remove methods to hide the menu
menu.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
toggler.classList.remove('active');
menu.classList.remove('active');
}
})
Fiddle: https://jsfiddle.net/y6adsov3/
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
