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

ساخت منوی همبرگری به کمک CSS و JQuery
از انجایی که کاربران موبایلی بخش مهمی از بازدیدکنندگان صفحات  وب را در بر می گیرند استفاده  از آیتم هایی که  علاوه بر زیبایی در دستگاه های کوچک هم قابل استفاده باشند محبوبیت زیادی بین کاربران و طراحان  وب دارد استفاده از یک منوی ریسپانسیو می تواند زیبایی و کارایی سایت را تا حد زیادی بالا ببرد. پلاگین های زیادی برای منوهای ریسپانسیو وجود دارد که می توانید با گشتی در اینترنت آنها را دانلود و استفاده کنید ولی اگر مقدار کمی زمان بگذارید به راحتی می توانید خودتان منوهای زیبایی بسازید آنها را بهبود دهید و لذت ببرید.
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
ردیاب
ردیاب آهنربایی پیام بهترین وسیله برای ردیابی وسیله نقلیه 09121394944
بلیط هواپیما
خرید آنلاین بلیط هواپیما داخلی و خارجی
خودتان را اینجا معرفی کنید

دموی منو را در سایت 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 و جی کویری افکت های زیبایی به منوی خود داده و آن را بهتر کنید.


 

فارغ التحصیل رشته مهندسی کامپیوتر، چندسالی در حوزه نگهداری شبکه های مایکروسافتی کار کرده و مدتی است وارد دنیای جذاب وب شده فرشته به زبان های برنامه نویسی سمت کاربر علاقه ی زیادی دارد.

نظرات و سوالات کاربران

ارسال پاسخ امیرحسین
امیرحسین
سه شنبه ۰۶ مهر ۱۳۹۵ ۱۶:۵۹
ببخشید
الان دمو رو دیدم
در واقع اول دنبال دمو میگشتم و بعد رفتم متن رو خوندم
به نظرم رو یو ایکس لینک دمو بیشتر کار کنید بهتره
ممنون
ارسال پاسخ امیرحسین
امیرحسین
سه شنبه ۰۶ مهر ۱۳۹۵ ۱۶:۵۷
سلام. ممنون. فقط چرا دموی آنلاین نمیذارین ؟