I'm working on creating a simple menu using CSS and jQuery. Everything seems to be functioning correctly, but I've noticed that when I open the menu, I am unable to click on any elements below it.
<header>
<nav>
<span>
<img src="img/header.png" alt="logo">
<i class="fas fa-bars trigger">menu</i>
</span>
<span class="menu-container hidden">
<div class="menu">
<a href="#">option</a>
<a href="#">option</a>
<a href="#">option</a>
<a href="#">option</a>
</div>
</span>
</nav>
<p><a href="#">Option I'm struggling to click</a></p>
<p><a href="#">Option I can't seem to click</a></p>
<p><a href="#">Option that won't click for me</a></p>
<p><a href="#">Unable to click this option</a></p>
The jQuery code is just toggling a class to move between the positions of the div
const menu = document.querySelector('.menu');
const trigger = document.querySelector('.trigger');
function toggle() {
menu.classList.toggle('menu--open');
}
trigger.addEventListener('click', toggle);
Here's a snippet of my CSS. The animation is purely CSS-based, and I am shifting the div's position when the menu button is clicked.
.menu {
position: relative;
top: -300px;
transition: 0.3s all;
}
.menu--open {
top: 0;
transition: 0.3s all;
}
nav {
width: 100%;
height: 70px;
position: absolute;
z-index: 1;
top: 0;
}
nav span {
display: flex;
align-items: center;
justify-content: space-between;
}
nav span:nth-child(1) {
background: white;
z-index: 1;
position: relative;
}
.menu-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.fa-bars {
margin-right: 20px;
font-size: 20px;
}
.fa-bars:hover {
cursor: pointer;
}
span .menu {
background: #95baa8;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
span .menu a {
padding: 15px;
text-decoration: none;
color: white;
}