I am trying to use toggleclass to build a hamburger menu. I want it to be clickable to display the menu by adding the class active. By default I have the burger icon display none and then adding the active class is supposed to make it display and clickable. I've tried the code a few different ways and it is not responding I wonder what I am doing wrong, any advice helps!
const menuToggle = document.querySelector('.menu');
$(document).ready(function() {
$('.card').on('mouseenter', function() {
$(this).find(".inner-card").toggleClass('active');
});
$('.card').on('mouseleave', function() {
$(this).find(".inner-card").toggleClass('active');
});
// #1
$('.hamburger-menu').on('click', function() {
$('.hamburger-menu').toggleClass('.active')
});
//#2
$('.hamburger-menu').onclick(function() {
$('.hamburger-menu').toggleClass('.active')
});
});
.hamburger-menu {
display: none;
}
@media only screen and (max-width: 886px) {
header {
display: flex;
justify-content: space-between;
}
.hamburger-menu {
display: inline-block;
.menu.active {
height: 100%;
width: 350px;
background: white;
z-index: 10;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<header>
<nav >
<a href="http://" >TravelSite</a>
<form id="form">
<input type="search" id="query" name="q" placeholder="Search...">
<button>Search</button>
</form>
<ul >
<li><a href="http://">Destinations</a></li>
<li><a href="http://">Blog</a></li>
<li><a href="http://">About</a></li>
<li><a href="http://">Contact</a></li>
</ul>
<div > <img src="../static/img/burger-bar.png" alt=""></div>
</nav>
</header>
CodePudding user response:
You were almost there but you were targeting the wrong item. I did some rearranging to your HTML and added a class to contain the links so you could target that instead of the ul
. You had some formatting issues in your CSS so I just took the media query out and cleaned it up, you can add that back into whatever size you need and adjust it from there.
$('.hamburger-menu').click(function() {
$('.navItems').toggleClass('active')
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
}
.hamburger-menu {
display: block;
width: 80px;
height: 80px;
margin: 0;
}
.hamburger-menu img {
display: block;
width: 80px;
height: 80px;
margin: 0;
}
.navItems {
display: none;
height: 100%;
width: 350px;
color: black;
background: white;
z-index: 10;
}
li a {
color: black;
}
.active {
display: block;
height: 100%;
width: 350px;
background: white;
z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav >
<a href="http://" >TravelSite</a>
<form id="form">
<input type="search" id="query" name="q" placeholder="Search...">
<button>Search</button>
</form>
<div >
<img src="https://i.imgur.com/WbNu8xl.jpeg" alt="">
<div >
<ul>
<li><a href="http://">Destinations</a></li>
<li><a href="http://">Blog</a></li>
<li><a href="http://">About</a></li>
<li><a href="http://">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>