ساخت منو

میتونی حالت یه چک باکس پنهان بذاری که وقتی چک شد display المنت منو رو برابر با مثلا flex قرار بده . و درصورتی که چک نشده باشه display برابر با
none باشه
اینطوری میشه با css هندل بشه
ولی با جاوااسکریپت دستت باز تره

سلام
بله سرچ کنtoggle button هم نمونه jquery پیدا میکنید وهم vanilla javascript

فرض میگیریم که یک دکمه قرار داره با کلیک روش منو از سمت چپ وارد صفحه میشه( سناریو همه منو ها همینه استایل ها فرق میکنه)
ابتدا یک 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>

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