منوهای آبشاری (Drop Down) در CSS

CSS Drop Down Menus

0 480

منوی آبشاری یا Drop Down چیست؟

منوهای آبشاری یا Drop Down منوهایی هستند که در ابتدا به شکل یک دکمه / تصویر / نوشته و … اند و زمانی که کاربر موس خود را روی آن می برد یا روی آن کلیک می کند یک منوی عمودی از آن ها خارج می شود.

برای توضیح این بحث با یک مثال ساده شروع می کنیم و سپس مثال های پیشرفته تری برایتان ذکر می کنم.

مثال زیر یک مثال ساده است که در آن یک منوی ساده ی آبشاری یا Drop Down خواهیم داشت. این منو با خصوصیت hover روی یک متن اجرا می شود. به کدهای زیر دقت کنید:

مشاهده ی خروجی در JSBin

توضیحات این مثال به دو قسمت کدهای مربوط به HTML و کدهای مربوط به CSS تقسیم می شود که ما از مورد اول شروع می کنیم.

کدهای مربوط به HTML:

شما می توانید از هر نوع عنصری برای باز کردن یک منوی آبشاری یا Drop Down استفاده کنید چه تگ <span> باشد چه تگ <button> و … . در مثال بالا از یک <span> استفاده کرده ایم. سپس از یک عنصر نگه دارنده (در این مثال، یک <div>) استفاده می کنیم تا محتوا و شکل منوی آبشاری یا Drop Down را در آن قرار دهیم. در آخر هم از یک عنصر <div> دیگر استفاده می کنیم تا محتوای منو و دیگر عناصر مربوط را با CSS مرتب کنیم.

کدهای مربوط به CSS:

در این مثال کلاس dropdown. از position:relative استفاده می کند. ما به این موقعیت نیاز داریم تا بتوانیم بعدا کاری کنیم که منوی آبشاری یا Drop Down دقیقا زیر دکمه اش باشد (از طریق position:absolute). همچنین کلاس dropdown-content. محتوای اصلی منو را در خود نگه می دارد که در حالت پیش فرض hidden (مخفی) است و تنها در هنگام hover (هنگامی که موس روی آن برود) نمایان می شود. توجه داشته باشید که min-width روی 160 پیکسل تنظیم شده است اما شما می توانید بر اساس سلیقه آن را تغییر دهید.

نکته: اگر می خواهید عرض منوی آبشاری یا Drop Down به اندازه ی دکمه اش باشد، خصوصیت width را روی %100 تنظیم کنید تا 100 درصدِ عرض پدرش (دکمه) را بگیرد.

همچنین مقدار overflow:auto را نیز تعیین کرده ایم تا کاربرانی که از صفحات نمایش کوچکتری دارند بتوانند اسکرول کنند. در این مثال به جای border از خاصیت box-shadow در CSS استفاده کرده ایم تا به منوی خودمان حالت card (کارت) بدهیم؛ یعنی مرز داشته باشد و جدا بودنش از بقیه ی محتوا کاملا مشخص شود. در آخر گفته ایم که در حالت hover آن را از حالت مخفی بیرون بیاورد و به block تبدیل کند.

حالا نوبت یک مثال زیبا تر است. بیایید این بار از یک دکمه به جای متن خالی استفاده کنیم:

مشاهده ی خروجی در JSBin

نحوه ی کارکرد این منو دقیقا مشابه منوی قبلی است و تنها تفاوت آن ها در ظاهرشان است.

نکته: ما در مثال بالا از "#"=href استفاده کرده ایم تا فقط لینک ها را به شما نمایش دهیم. در دنیای وب واقعی باید از لینک های واقعی برای این منوها استفاده کنید.

منوهای راست به چپ

سوال: اگر بخواهیم منوهای ما از راست به چپ باز شوند چطور؟

پاسخ: شما می توانید با خصوصیت های right و left این کار را انجام دهید. به مثال زیر نگاه کنید:

مشاهده ی خروجی در JSBin

منوهای تصویری و Navbar ها

همانطور که گفتیم شما می توانید از هر عنصری برای ایجاد یک منوی آبشاری یا Drop Down استفاده کنید. در این مثال میخواهیم از یک تصویر استفاده کنیم:

مشاهده ی خروجی در JSBin

در مثال بالا زمانی که موس خود را روی تصویر کوچک ببرید یک منوی دیگر باز می شود که شبیه card است. این منو در واقع همان عکس به صورت بزرگ نمایی شده است.

همچنین از جلسات قبل حتما navigation bar های dropdown را به یاد دارید:

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد CSS به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle