Is there a way to create a full-width dropdown menu that appears when the burger icon is clicked, while still maintaining the close function? (The dropdown menu and burger icon should transition smoothly when clicked)
Here are the JavaScript functions for animating the burger menu. The menu transitions on hover and closes when clicked:
$("#wrapper").hover(function() {
$(".menu").toggleClass("transition");
});
$("#wrapper").click(function() {
$(".transition").toggleClass("close");
});
Below is the CSS code for transitioning the burger menu on hover and applying the closed state:
<style>
.burgerMenu-right {
font-family: 'Circe Rounded', sans-serif;
font-weight: 800;
display: inline;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 20px;
color: black;
float: right;
position: relative;
right: 4%;
}
.main-item {
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
}
.line {
position: absolute;
height: 2px;
width: 100%;
background: white;
border-radius: 2px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
background: black;
}
.line01 {
top: 33.3%;
width: 100%;
left: 0;
}
.line02 {
top: 66.6%;
width: 65%;
right: 0;
}
.menu:hover .line01 {
width: 65%;
}
.menu:hover .line02 {
width: 100%;
top: 66%;
}
.menu.close .line01 {
transform: rotate(45deg);
top: 49%;
width: 100%;
}
.menu.close .line02 {
transform: rotate(-45deg);
top: 49%;
width: 100%;
}
</style>
Lastly, here is the HTML code for implementing the burger menu:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="main-item menu">
<span class="line line01"></span>
<span class="line line02"></span>
</div>
</div>
Thank you!