ساخت منو

فرض میگیریم که یک دکمه قرار داره با کلیک روش منو از سمت چپ وارد صفحه میشه( سناریو همه منو ها همینه استایل ها فرق میکنه)
ابتدا یک button ساده برای اینکه کاربر روش کلیک کنه و منو باز بشه در نظر میگیریم

<button>Click me </button>

حالا اون منویی که قراره بعد از کلیک وارد صفحه بشه رو مجدد ساده طراحی میکنیم، یه منو با که کل عرض صفحه رو میگیره و فیکس هستش

<style>
    .menu{
        background-color:lightblue;
         position:fixed;
         width:100%;
        height:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        right:100%;
        transition:all 500ms;
}
</style>
<div class='menu'>
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
  </ul>
</div>

توی استایل بالا مقدار right رو ۱۰۰ درصد قرار دادیم این باعث میشه که منو ما از صفحه خارج بشه حالا نیاز داریم به یک کلاس اکتیو که باعث بشه این منو ما برگرده داخل صفحه به این شکل :

<style>
.menu.active{
  right:0 !important;
}
</style>

حالا فقط لازمه که با جاوا اسکریپت بگیم روی button که کلیک شده به menu کلاس active رو بده و بگیر به این شکل :

<script>
let btn = document.querySelector('button')
let menu = document.querySelector('.menu')
btn.addEventListener('click' , toggle_menu )
function toggle_menu(){
  menu.classList.toggle('active');
}
</script>

مشابهش رو اینجا میتونید ببنید