طراحی menu به این شکل شاید در نگاه اول کمی سخت به نظر برسه و شاید هم فکر کنید تنها به واسطه‌ی جاوااسکریپت هست که میتونید موفق به ساختن menu با چنین ویژگی بشید.

ما در css میتونیم به رویداد‌هایی مثل حرکت موس یا نگه داشتنِ کلیک بر روی عنصری با استفاده از کلاس‌ها کاذب style لازم رو بدیم؛ اما مشکل اینجاست که ما نمیتونیم style رو از حالتی به حالت دیگه به شکلی تغییر بدیم که این style با دور شدن موس از روی عنصر مورد نظر از بین نره. این کار به اصطلاح toggle کردن بین دو حالت گفته میشه. قرار هست که به اتفاق هم با استفاده از ترفندی این menu رو بدون نیاز به جاوااسکریپت بسازیم.

toggle کردن بدون جاوااسکریپت

به قطعه کد زیر توجه کنید ما از تگ input با نوع checkbox استفاده کردیم. همونطور که میدونید این تگ دو حالت داره یکی حالت checked و دیگری حالت عادی که unchecked هست. نکته جالب اینجاست که ما میتونیم در css به این شکل style بدیم:  input:checked + p. یعنی در صورت checked بودن عنصرِ input، اولین تگ p بعد از input  رو به رنگ قرمز درمی‌آریم. و این یعنی همون ویژگی که ما در css دنبالش بودیم:

خب همونطور که میبینید هر بار که داخل input کلیک کنید رنگ p به قرمز تغییر میکنه.

شروع ساخت menu کشویی

در ادامه قراره menu با ویژگی بسازیم که با کلیک کردن بر روی menu-icon، باز شده و در صورت کلیک دوباره menu بسته بشه.لطفا برای شروع کار  فایل‌های تمرینی رو دانلود کنید.

خب اول از همه نگاهی کنیم به ساختار کلی ‌index.html

<div class="container">
    <input type="checkbox" id="menu-toggle">
        <label for="menu-toggle" class="menu-icon">☰</label>
    </input> 

    <ul id="menu">
        <li>خانه</li>
        <li>مقالات</li>
        <li>بلاگ</li>
        <li>درباره ما</li>
    </ul>
</div>

تگ ‌input داخلش عنصری با تگ label قرار گرفته و این تگ با ویژگی for به id عنصر input مرتبط شده. اگر با فرم‌های html کار کرده باشید متوجه شدید که تا الان چه کاری انجام دادیم؛ اما اگر سوالی در این مورد داشته باشید میتونید با خوندن این مطلب به جواب سوالاتتون برسید. و اما دلیل این کار، برای این منظور هست که ما بتونیم از style پیش فرض html برای checkbox خلاص شیم و برای نمونه از آیکن استفاده کنیم، پس این دو رو به هم مرتبط میکنیم برای نمونه عکسی رو برای label قرار میدیم و که با کلیک کردن به روی label عنصر input check و uncheck میشه.

خب فایل style-starter.css رو باز کنید. قراره که قدم به قدم در جاهایی از این فایل که به شکل comment نوشتم، type here تغییرات رو اعمال کنیم.

اول از همه پیرو پاراگراف بالا، قراره که خود input رو نبینیم به همین جهت، قطعه کد پایین از فایلی که حالا اجراش کردیم رو تغییر میدیم:

#menu-toggle{
    /* type here */
    display: none;
}

خب به همین راحتی با استفاده از ;display: none اون رو از دید کاربرمون مخفی کردیم.

دومین کاری که قراره انجام بدیم اینه که menu-icon رو بالاتر از عنصر menu قرار بدیم تا بتونیم به روی اون کلیک کنیم. به این شکل:

.menu-icon{
    /* type here */
    z-index: 99999;
}

چینش دلخواه عناصر با z-index

دقت کنید زمانی که ما از position: absolute برای چند عنصر مختلف استفاده میکنیم این عناصر روی هم قرار میگیرن، در حالت عادی ترتیب قرار گرفتن کد‌هاشون در html تعیین کننده این هست کدوم عنصر بالاتر از بقیه قرا بگیره. اما برای اینکه ما بتونیم به شکل دستی تعیین کنیم که کدوم عنصر یا عناصر پشت هم قرار بگیرن از z-index استفاده میکنیم. ما در اینجا با قرار دادن مقدار ۹۹۹۹۹ اینطور تعیین کردیم که عنصر مورد نظر ما بالاتر از همه‌ی این تعداد عناصر قبل از خودش قرار بگیره. خب واضحه که برای اینکه بخواییم عنصری دقیقا یکی مانده به عنصر menu-icon قرار بگیره از عدد ۹۹۹۹۸ استفاد مکنیم، البته نه به این دقت، فقط کافیه که این عدد کوچکتر از عدد قبلی باشه. خب عنصر menu# قراره که بعد از menu-icon قرار بگیره و همچنین عنصر overlay هم قرار هست بعد از menu# قرار بگیره. پس کد های هر دو رو به شکل زیر تغییر میدیم:

#menu{
    /* type here */ 
    z-index: 99998;
}

#overlay{
    /* type here */ 
    z-index: 99997;
}

خب تنها نکته‌ای که باید بهش توجه کنید اینه که #overlay همون عنصر صورتی رنگی هست که پشت menu هنگام باز شدن قرار میگیره.

به حرکت درآوردن عناصر با translate

خب برای شروع اول از همه menu رو میبریم سرجای خودش، اگه به فایل style-starter دقت کنید عنصر menu طولی برابر با ۳۵۰px داره خب برای اینکه اون رو به بیرون body منتقل کنیم کافیه اون رو به همین اندازه به سمت راست منتقل کنیم. برای این منظور از translateX استفاده میکنیم. خب حالا فایل‌ style به شکل زیر تغییر میدیم:

#menu{
    /* type here */ 
    z-index: 99998;
    transform: translateX(350px);
}

خب اگه نتیجه کارمون رو تا به الان بررسی کنید، میبینید که همه چیز سر جای خودشون قرار گرفته. اما با کلیک کردن به روی menu-icon فعلا اتفاقی نمی‌افته.

راه‌ اندازی menu

به بخش‌های آخر فایل starter-style مراجعه کنید. قراره که بعد از checked شدن عنصر menu-toggle چند اتفاق رخ بده. اول از همه و مهم‌تر از همه این که عنصر menu به سمت چپ حرکت کنه و به اصطلاح باز بشه و در ادمه menu-icon نود درجه بچرخه و دیگه اینکه عنصر overlay هم دیده بشه. به قطعه کد زیر دقت کنید:

#menu-toggle:checked ~ #menu{
    box-shadow: -4px 0px 10px rgba(0,0,0,.5); 
    /* type here */
    transform: translateX(0);


}
#menu-toggle:checked ~ .menu-icon{
    color:#fff; 
    /* type here */
    transform: rotate(-90deg);


}
#menu-toggle:checked ~ #overlay{
    /* type here */
    display: block;

}

نکته: ما برای انتخاب تمام عناصر بعد از menu-toggle# کافیه که از انتخابگرِ ~ استفاده کنیم. این انتخابگر عناصر بعد از خودش رو براحتی و بدون محدودیت انتخاب میکنه؛ از این جهت که مهم نیست عنصر انتخاب شده بعد از menu-toggle# کجای اون قرار گرفته باشه. (بعد از عنصر، یا فرزند مستقیم عنصر… برای این انتخابگر تفاوتی نمیکنه).

حرف آخر

خب کارمون تموم شد، اگر با کد‌هایی که تا الان نوشتید با مشکلی مواجه شدید میتونید نگاهی به فایل style-finished.css بیندازید.

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