ساخت منوی همبرگری به کمک CSS و JQuery

از انجایی که کاربران موبایلی بخش مهمی از بازدیدکنندگان صفحات وب را در بر می گیرند استفاده از آیتم هایی که علاوه بر زیبایی در دستگاه های کوچک هم قابل استفاده باشند محبوبیت زیادی بین کاربران و طراحان وب دارد استفاده از یک منوی ریسپانسیو می تواند زیبایی و کارایی سایت را تا حد زیادی بالا ببرد. پلاگین های زیادی برای منوهای ریسپانسیو وجود دارد که می توانید با گشتی در اینترنت آنها را دانلود و استفاده کنید ولی اگر مقدار کمی زمان بگذارید به راحتی می توانید خودتان منوهای زیبایی بسازید آنها را بهبود دهید و لذت ببرید.
موی منو را در سایت codepen قرار دادم می توانید برای مشاهده دمو اینجا کلیک کنید.
خوب اول از همه یک منو می سازیم و آن را استایل دهی می کنیم.
در کد زیر دو تا آیکون داریم یکی آیکون منو برای باز کردن و دیگری آیکون کراس برای بستن منو. توجه کنید این آیکون ها را برای سایز دسکتاپ diplay:none قرار می دهیم.

کد:

---

<nav>
  <span class="icon-menu">☰</span>
  <ul id="menu" >
    <div class="icon-cross">˟</div>
    <li><a href="#"> خانه </a></li>
    <li><a href="#"> وبلاگ </a></li>
  </ul>
</nav>

---

​اصولا برای سایز تبلت و کوچکتر منوی افقی جمع شده و یک آیکون کوچک جای آن را می گیرد پس قدم اول تعیینbreakpoint برای سایز تبلت است:

کد:

---

@media only screen and (max-width:991px) {
   
}

---

و اضافه کردن استایل برای آیکون ها

کد:

---

@media only screen and (max-width:991px) {
    nav .icon-menu{ 
      display: inline-block;
    }
    nav .icon-cross{
    display:none;
    padding:0 20px 0 0;
    color: #969ba8;
    cursor: pointer;
    font-size:3rem;
    }
}

---

در قدم دوم باید ul را به خارج صفحه منتقل کرده و به جای آن آیکون منو را قرار دهیم.
استایل زیر را به ul می دهیم و آن را 400px به خارج صفحه شیفت می دهیم توجه کنید که این استایل را باید در مدیا کویری تعریف شده در بالا بنویسیم:

کد:

---

nav ul{
  height:100%;
  right:-400px;
  position:fixed;
  padding:20px 0;
}

---

مرحله ی بعد اضافه کردن لایه ای به نام slide-in است وقتی روی آیکون منو کلیک می شود این لایه زیر المان های li قرار می گیرد و در واقع بک گراند را به منو اضافه می کند:

کد:

---

@media only screen and (max-width:991px) {
    .slide-in{
        height: 100%;
        padding:2px 0;
        margin: 0;
        position: fixed;
        top: 0;
        right:0;
        width: 300px;
        background-color: white;
        z-index: 100;
    }
}

---

در ادامه توضیح می دهم که چرا z-index:100 گذاشتم.
در آخر هم یک لایه می سازیم به نام overlay این لایه هنگامی که منو باز می شود باقی صفحه را می پوشاند تا صفحه ای تمیز تر و زیباترداشته باشیم.

کد:

---

#overlay{
    background-color: rgba(0, 0, 0, 0.82);
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 1;
    display: none;
}

---

همان طور که می بینید z-index این لایه 1 است و لایه slide-inz-index:100 دارد در نتیجه لایه اسلاید روی لایه ی overlay قرار می گیرد.
خوب css تمام. بریم سراغ جی کویری:
1- وقتی روی منو کلیک می شود کلاس slide-in بهul اضافه می شود.
2-آیکون کراس(برای بستن منو)به slide-in اضافه می شود.
3-لایه overlay نمایش داده می شود.
4-برای جلوگیری از اسکرول خوردنbody را overflow:hidden قرار می دهیم.

کد:

---

$(".icon-menu").click(function(){
    $("#menu").addClass("slide-in");
    $(".icon-cross").css("display","inline-block");
    $("#overlay").show();
    $("body").css("overflow", "hidden")
});

---

قدم آخر برای وقتی است که روی آیکون ضربدر (icon-cross) کلیک می شود و منو جمع می شود برای این مرحله به آسانی چهار مرحله بالا را برعکس طی میکنیم و تمام.

کد:

---

$(".icon-cross, #overlay").click(function(){
    $("#menu").removeClass("slide-in");
    $(".icon-cross").css("display","none");
    $("#overlay").hide();
    $("body").css("overflow", "auto")
});

---

شما می توانید با اضافه کردن چند خط css و جی کویری افکت های زیبایی به منوی خود داده و آن را بهتر کنید.