کدهای جذاب و دیدنی ( Nested Dropdown Navigation ) : ساخت منوی تودرتو زیبا با CSS خالص

ساخت وبلاگ

در این قسمت میخوام یک کد ( Nested Dropdown Navigation ) جالب رو در اختیارتون بزارم.

توضیحات مربوط به کد

همونطور که دیدید یک منو قرار داده شده و زمانی که بر روی اون کلیک میکنید زیر منوی سطح اول باز میشه. گزینه مربوط به Shop یک آیکون > داره که با کلیک بر روی اون زیرمنوهای سطح دوم نیز با افکتی زیبا باز میشن. این کار با استفاده از CSS خالص انجام شده است و هیچ کد Javascript در اون استفاده نشده است.

شاید با خودتون میگید که CSS از کجا میفهمه که چه موقع بر روی منو کلیک شده است؟!

در این مواقع از یک تکنیک جالب استفاده میشه. یک Checkbox در پس زمینه قرار داده میشه و اون رو مخفی میکنیم و زمانی که بر روی منوی مورد نظر کلیک میشه، بین حالت checked و uncheck تغییر داده میشه.

مرحله بعد در CSS با استفاده از کلاس کاذب :checked زمانی که چک باکس تیک خورده باشه رو میفهمیم و متناسب با اون کاری رو انجام میدیم (مثلا نمایش زیر منو).

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

لینک دانلود

Source

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : کدهای,دیدنی,تودرتو, نویسنده : استخدام کار 7learn بازدید : 281 تاريخ : پنجشنبه 6 مهر 1396 ساعت: 15:37

خبرنامه