從右向左滑動菜單> Jquery

Question

嗨，大家好，我希望我的垂直菜單可以從右向左滑動。但據我所知，jquery是與.toggle（）（這是從上到下滑動） 我想要點擊漢堡菜單時，菜單從右向左滑動。如果ANY1能幫助我，我真的很aprreaciate

我沒有用jQuery嘗試了由右至左滑動的任何代碼，我只用.toggle

.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>

試圖

Answer 1

這是你在找什麼？

CodePen link

.first-section{ 
    display: none; 
    padding: 0; 
} 

JQUERY：

$('.ham-menu').click(function(){ 
    $('.first-section').toggle(); 
})