هک css - ساخت یک Dropdowns تنها با checkbox

در این آموزش سریع ، ما یک نگاه به تنها روش ساخت Dropdowns کردیم بعد تصمصیم گرفتیم به دنبال یک راه دیگه برای ساخت Dropdowns بگردیم که به یک روش هوشمندانه برخورد کردیم که با استفاده از checkbox ها میتوان یک Dropdowns ایجاد کرد بدونه حتی یک خط کد جاوااسکریپت . 

دانلود فایل | دمو

خب بریم سراغ توضیحات اصلی و نحوه ساخت Dropdowns با checkbox

ساختار Html

در پایین میتونید کد html رو مشاهده کنید . در اینجا این مهمه که input قبل از المنت های label و ul نوشته بشه . در قسمت کد های css توضیح میدم که چرا این مهمه که ما input رو قبل اون دو المنت دیگه قرار بدیم

<div class="dropdown">
    <input type="checkbox" id="checkbox_toggle">
    <label for="checkbox_toggle">Click to Expand</label>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>

همینطور که کد بالا رو مشاهده میکنید چیز عجیبی در کد ها وجود نداره و همه چیز بصورت استاندارد نوشته شده 

• div که در ابتدایی کدها قرار داره به عنوان یک ظرف استفاده میشه که مابقیه کد ها رو داخل خودش نگاه میداره 
• input برابر با type=checkbox برای این نیازه که ما به حالت های checked/unchecked برای بوجود اوردن Dropdowns نیاز داریم اون دو حالت برای همیشه پنهان خواهند بود .
• label برای قرار دادن یک نوشته و همینطور ماشه ای برای کرکره استفاده میشه .
• المنت ul هم برای لیست Dropdowns  استفاده میشه که داخل المنت li میتونه هر محتوایی وجود داشته باشه .

هک checkBox

در ابتدا ما نیاز داریم المنت  checkbox ، در حالت checked قرارداده بشه چون با استفاده از شبه انتخاب گر :checked میتونیم استایل مورد نظرمون رو بدیم . چک کردن و برداشتن با کلیک کردن روی label هم انجام میشه این یک ویژگی اصلی در مروگرهاست خب در ابتدا ما checkbox اصلی رو پنهان میکنیم بصورت زیر

input[type=checkbox]{
    display: none;
}

در قدم بعدی ما باید المنت ul رو نیز پنهان کنیم برای اینکه تا زمانی که روی label کلیک نکردیم menu نباید مشاهده بشه .

ul{
    display: none;
}

و در اینجا در مورد هک اصلی صحبت میکنیم . اگر ما شبه انتخاب گر  :checked رو با انتخاب گر sibling یعنی (~) ترکیب کنیم با اینکار ما میتونیم به راحتی Dropdowns رو ایجاد کنیم و دلیل اینکه چرا ما checkbox رو به عنوان المنت اول قرار دادیم اینکه DOM ما بصورت درخته برای همین کد زیر عملی میشه و اگه غیر این باشه کد پایین عملی نمیشه 

input[type=checkbox]:checked ~ ul {
    display: block
}

قطعه کد بالا باعث میشه فقط زمانی که چک باکس برابر با checked بود المنت ul یا همون منو ما نمایش داده بشه . به این صورت شما با استفاده از یک checkbox میتونید یک Dropdowns بسازین امیدوارم این روش و این نکته براتون جالب بوده باشه .