Hello everyone, I am looking to have my vertical menu slide from right to left instead of the typical top to bottom sliding that comes with using .toggle() in jQuery. Specifically, when the hamburger menu is clicked, I want the menu to slide out from right to left. If anyone has any tips or solutions, I would greatly appreciate it.
So far, I haven't been able to achieve the desired sliding effect using jQuery, as I've only experimented with the .toggle function.
.ham-menu{
width: 35px;
display: block;
z-index: 2;
position: relative;
top: 10px;
right: 15px;
cursor: pointer;
}
.ham-menu .line{
background: green;
width: 100%;
display: block;
margin-top: 3px;
height: 4px;
border-radius: 2px;
}
.first-section{
padding: 0;
}
.first-section .slide-menu{
width: 20vw;
height: 100vh;
background-color: #000;
z-index: 1;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.list-menu{
list-style: none;
text-align: center;
font-size: 30px;
}
.list-menu li{
margin: 20px;
}
.list-menu a{
text-decoration: none;
color: #fff;
}<div class="ham-menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<div class="first-section container-fluid">
<div class="slide-menu">
<ul class="list-menu animated">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Footer</a></li>
</ul>
</div>
</div>