منوی کشویی
ساخت یک منوی کشویی قابل hover شدن با CSS.[۱]
محتویات
نسخهٔ نمایشی: مثال های Dropdown
نشانهگر موس را روی مثالهای زیر ببرید:
منوی کشویی ساده
ساخت یک جعبه کشویی ساده که هنگام قرار گرفتن نشانهگر موس بر روی عنصر، ظاهر میشود.
توضیح مثال
HTML) از هر عنصری برای باز کردن محتوای کشویی، مانند یک <span> ، یا یک عنصر <button> استفاده کنید.
از یک عنصر نگه دارنده (مانند <div>) برای ساخت محتوای کشویی و اضافهکردن هر آنچه که میخواهید در درون آن، استفاده کنید.
قرار دادن یک عنصر <div> دور عناصر برای موقعیت دهی صحیح محتوای کشویی با CSS.
CSS) کلاس .dropdown
از position:relative
استفاده میکند، که هنگامی که میخواهیم محتوای کشویی در قسمت سمت راست دکمه کشویی (با استفاده از position:absolute
) قرار گیرد، مورد نیاز است.
کلاس .dropdown-content
محتوای واقعی کشویی را نگه میدارد. به صورت پیشفرض مخفی است، و در هنگام قرارگیری موس روی عنصر (hover) نمایش داده خواهد شد. (مثال پایین را ببینید). توجه داشته باشید که ویژگی min-width برلبر با 160px تنظیم شدهاست. می توانید آن را تغییر دهید .<translate> نکته</translate> نکته: اگر میخواهید عرض محتوای کشویی برابر با اندازه کلید کشویی باشد، ویژگی width
را برابر با ۱۰۰٪ تنظیم کنید (و overflow:auto
را برای فعال سازی پیمایش در صفحات کوچک استفاده کنید).
به جای استفاده از یک کادر، از ویژگی box-shadow
در CSS برای اینکه منوی کشویی شبیه به یک «کارت» باشد استفاده کردهایم.
انتخابگر :hover
برای نمایش منوی کشویی هنگامی که کاربر نشانهگر موس را روی کلید کشویی قرار میدهد استفاده میشود.
منوی کشویی
یک منوی کشویی ایجاد می کند که به کاربر اجازه میدهد یک گزینه را از لیست انتخاب کند:
این مثال بسیار شبیه به مثال قبل است، با این تفاوت که ما لینکهایی درون جعبه کشویی اضافه کردهایم و آنها را استایل دهی کردهایم تا برای یک کلید استایل دهی شده کشویی مناسب باشند:
راست چین کردن محتوای Dropdown
اگرشما میخواهید منوی کشویی به جای چپ به راست، از راست به چپ باشد، کد right: 0;
را اضافه کنید
مثالهای بیشتر
تصویر کشویی
چگونه یک تصویر و سایر محتوا را درون جعبه کشویی اضافه کنیم.
اشاره گر ماوس خود را روی تصویر ببرید:
چگونه یک منوی کشویی درون ناحیه navigation اضافه کنیم.
منابع آموزشی