عنوان مقاله :

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

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

احراز هویت (Authentication) و انواع آن

Authentication یا احراز هویت به فرآیندی گفته می شود که در آن ارسال کننده یا دریافت کننده اطلاعات برای همدیگر اطلاعاتی را ارائه می کنند تا مطمئن شوند آ...

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

مدیریت رسانه های اجتماعی یک کار چندجانبه است، این کاری نیست که کارمندی مستقل از سازمان شما آن را انجام دهد. در واقع، بعضی معتقدند که این حتی یک شغل نی...

5 راهکار برای افزایش سرعت سایت

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

آموزش آنگولار جی اس برای طراحان

یک شروع خوب! همان طور که سازنده ی آنگولار: میسکو هوری در مصاحبات مختلفش گفته است: "هدف آنگولار جی اس توانمند کردن طراحان وب (ونه برنامه نویسان)برا...

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

برای ارسال نظر لازم است ابتدا وارد سایت شوید
مهدی | 2 سال پیش

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

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

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