How do I make a menu appear after clicking an animated icon in html?
Question
I'm making a website and I have an icon that can animate (it goes from 3 bars to an x). However, I cannot seem to get a menu to appear below it after I click it.
I have tried: Adding an if statement so that when the icon is clicked the menu appears.
adding a menu button then adding the links inside of the container.
but nothing seems to work.
here is my code:
<!DOCTYPE html>
<body>
<head>
<title>JJ's Contracting Services.com</title>
<style>
h1 {
position: absolute;
top:0;
left:16px;
}
.header {
width:auto;
padding: 200px;
color: white;
background-image: url(https://ak6.picdn.net/shutterstock/videos/1022525326/thumb/1.jpg);
background-position: center top;
}
img {
z-index: -1;
vertical-align: text-top;
top:0;
width:100%;
height:200px;
}
.container {
display: inline-block;
cursor: pointer;
position:absolute;
right:30px;
top:10;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity:0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
@media only screen and (max-width:600px) {
.header {
width:100%;
}
}
</style>
<div class= "header">
<h1>JJ's Contracting Services</h1>
</div>
<div class = "container" button onclick="myFunction(this)">
<div class = "bar1"> </div>
<div class = "bar2"> </div>
<div class = "bar3"> </div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</html>
1 answers
solution1
0 2020-03-26 04:39:16
As in your code, change class will make the menu. You can toggle change class in jquery easily in the following way.
<script>
$(document).ready(function(){
$('.container').click(function(){
$('#menu').toggleClass('change')
}
})
</script>
But to this work, you should create a div with the id #menu so that jquery and use it to toggle the class.
<div class= "header">
<h1>JJ's Contracting Services</h1>
</div>
<div class = "container" button onclick="myFunction(this)">
<div class = "bar1"> </div>
<div class = "bar2"> </div>
<div class = "bar3"> </div>
</div>
<div id="menu"></div>
Don't use hamburger menu class(3 line button) to toggle as it converts the button into a menu. It will not look nice.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.