I’m using this exact example on Codepen: https://codepen.io/Aislam23/pen/aKveGp as my menu button.
Now I am trying to figure out, how to show the arrow first and when clicked the menu button.
In the Codepen you have the burger menu icon first then the arrow, I want it the opposite way.
Is it even possible ?
$('.menu-btn').on('click', function(e) {
e.preventDefault;
$(this).toggleClass('menu-btn_active');
});body {
font-family: sans-serif;
margin: 0;
}
.section {
height: 100vh;
background-color: #7b1fa2;
display: flex;
justify-content: center;
align-items: center;
}
.menu-btn {
display: block;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
position: relative;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
position: absolute;
top: 50%; margin-top: -1px;
left: 50%; margin-left: -10px;
width: 20px;
height: 2px;
background-color: #222;
}
.menu-btn span::before,
.menu-btn span::after {
content: '';
display: block;
transition: 0.2s;
}
.menu-btn span::before {
transform: translateY(-5px);
}
.menu-btn span::after {
transform: translateY(5px);
}
.menu-btn_active span:before {
transform: rotate(-35deg);
width: 10px;
transform-origin: left bottom;
}
.menu-btn_active span:after {
transform: rotate(35deg);
width: 10px;
transform-origin: left top;
}
.menu-block {
display: flex;
justify-content: center;
align-items: center;
}
.menu-nav {
background-color: #fff;
height: 50px;
}
.menu-nav__link {
display: inline-block;
text-decoration: none;
color: #fff;
margin-right: 20px;
}
.menu-nav__link {
transition: 0.5s;
transform-origin: right center;
transform: translateX(50%);
opacity: 0;
}
.menu-nav__link_active {
transform: translateX(0%);
opacity: 1;
}<div class="section">
<a href="#" class="menu-btn">
<span></span>
</a>
</div>>Solution :
This could be done easily by adding the menu-btn_active class to the a.href.
<div class="section">
<a href="#" class="menu-btn menu-btn_active">
<span></span>
</a>
</div>