عنوان مقاله :

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

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 31 مرداد 1394
دسته بندی ها : آموزشی

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

مقالات پیشنهادی

ساخت یک سیستم متحرک فوق العاده برای پنل عضویت ویژه

طراحی یک فرآیند پرداخت آسان هرگز راحت نبوده چون هیچ استاندارد جهانی براش وجود نداره .اگه شما در ارائه و پیشنهاد دادن پنل های مختلف با قیمت های مختلف م...

افکت های اسکرول برای صفحات وبسایت

امروز قصد داریم یک کتابخانه کوچک برای افکت های اسکرول ، صفحه های خودمون بسازیم . ما با قرار دادن برخی از افکت های فانتزی قصد داریم زمانی که کاربر در...

ساخت یک فرم تماس زیبا و کاربردی

امروز میخوایم یک فرم تماس زیبا ، ساده و کاملا قابل شخصی سازی رو با هم بسازیم . یک قطعه فرم مینیمال و قابل تنظیم سازی که باعث میشه شما دارای یک فرم معن...

آموزش ساخت یک وبلاگ ساده با لاراول 5 [قسمت سوم]

مسیریابی ، نقش اساسی در عملکرد هسته هر فریم ورک MVC ایفا میکنه . در حقیقت Route یه نگاشت بین موتور requests و response اگه بخوایم خیلی ساده تعریفش کنی...

دیدگاه های ارزشمند شما

مهدی | 2 سال پیش

ممنون. مفید بود.

میلاد | 2 سال پیش

جالب بود. مرسی