منوهای کرکره‌ای

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکن‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

منوی کرکره ای ساده

منوی کرکره‌ای یک منوی جمع شدنی (به انگلیسی: Toggleable) است که به کاربر اجازه انتخاب یک مورد از میان آیتم‌های لیست را می‌دهد:[۱]

مثال

 1 <div class="dropdown">
 2   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 3     Dropdown button
 4   </button>
 5   <div class="dropdown-menu">
 6     <a class="dropdown-item" href="#">Link 1</a>
 7     <a class="dropdown-item" href="#">Link 2</a>
 8     <a class="dropdown-item" href="#">Link 3</a>
 9   </div>
10 </div>


مشاهدهٔ نتیجه


توضیح مثال

کلاس .dropdown یک منوی کرکره‌ای را نشان می‌دهد.

برای باز کردن منوی کرکره‌ای، از یک کلید یا لینک با کلاس .dropdown-toggle و ویژگی data-toggle="dropdown" استفاده کنید.

برای ایجاد یک منوی کرکره‌ای کلاس .dropdown-menu را به عنصر <div> اضاف کنید. سپس کلاس .dropdown-item را به هر عنصر (لینک یا کلید) داخل منوی کرکره‌ای اضافه کنید.

جدا کنندهٔ کرکره ای

کلاس .dropdown-divider برای جداسازی لینک‌های داخل منوی کرکره‌ای با یک مرز افقی باریک به کار می‌رود:

مثال

<div class="dropdown-divider"></div>


مشاهدهٔ نتیجه


عنوان منوی کرکره ای

کلاس .dropdown-header برای اضافه کردن عنوان‌های داخل منوی کرکره‌ای استفاه می‌شود:

مثال

1 <div class="dropdown-header">Dropdown header 1</div>


مشاهدهٔ نتیجه


آیتم های فعال و غیرفعال

یک آیتم خاص منوی کرکره‌ای را می‌توان با کلاس .active فعال کرد (رنگ پس زمینه آبی به آن اضافه می‌کند).

برای غیرفعال کردن یک مورد در منوی کرکره‌ای، کلاس .disabled به کار می‌رود (رنگ متن خاکستری روشن می‌شود و در صورت قرار گرفتن اشاره‌گر ماوس روی آن علامت «پارک ممنوع» ظاهر می‌شود):

مثال

1 <a class="dropdown-item active" href="#">Active</a>
2 <a class="dropdown-item disabled" href="#">Disabled</a>


مشاهدهٔ نتیجه


مکان منوی کرکره ای

با اضافه کردن .dropright یا .dropleft به عنصر dropdown می‌توانید یک منوی “dropright” یا "dropleft" هم ایجاد کنید. دقت کنید که caret/arrow بطور خودکار اضافه خواهد شد:

Dropright

<div class="dropdown dropright">


مشاهدهٔ نتیجه

Dropleft

<div class="dropdown dropleft">


مشاهدهٔ نتیجه

منوی کرکره ای راست‌چین

کلید منوی کرکره‌ای را باز کنید تا این مثال را ببینید

برای راست-چین کردن منوی کرکره‌ای، کلاس .dropdown-menu-right را به عنصر .dropdown-menu اضافه کنید:

مثال

<div class="dropdown-menu dropdown-menu-right">


مشاهدهٔ نتیجه


باز شونده رو به بالا (به انگلیسی: Dropup)

اگر بخواهید منوی کرکره‌ای به جای پایین، رو به بالا باز شود، عنصر <div> را با class="dropdown" به "dropup" تغییر دهید.

مثال

<div class="dropup">


مشاهدهٔ نتیجه


متن کرکره ای

کلاس .dropdown-item-text برای اضافه کردن متن آشکار به یک آیتم کرکره‌ای یا استفاده در لینک‌ها برای استایل دهی به لینک پیش فرض استفاده می‌شود.

مثال

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Link 1</a>
  <a class="dropdown-item" href="#">Link 2</a>
  <a class="dropdown-item-text" href="#">Text Link</a>
  <span class="dropdown-item-text">Just Text</span>
</div>


مشاهدهٔ نتیجه


گروه کلیدها با منوی کرکره ای

مثال

 1 <div class="btn-group">
 2   <button type="button" class="btn btn-primary">Apple</button>
 3   <button type="button" class="btn btn-primary">Samsung</button>
 4   <div class="btn-group">
 5     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 6        Sony
 7     </button>
 8     <div class="dropdown-menu">
 9       <a class="dropdown-item" href="#">Tablet</a>
10       <a class="dropdown-item" href="#">Smartphone</a>
11     </div>
12   </div>
13 </div>


مشاهدهٔ نتیجه


منوهای کرکره ای کلید مجزا (به انگلیسی: Split Button)

مثال

1 <div class="btn-group">
2   <button type="button" class="btn btn-primary">Primary</button>
3   <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
4   </button>
5   <div class="dropdown-menu">
6     <a class="dropdown-item" href="#">Link 1</a>
7     <a class="dropdown-item" href="#">Link 2</a>
8   </div>
9 </div>


مشاهدهٔ نتیجه


منو کرکره ای /w گروه کلیدهای عمودی

مثال

 1 <div class="btn-group-vertical">
 2   <button type="button" class="btn btn-primary">Apple</button>
 3   <button type="button" class="btn btn-primary">Samsung</button>
 4   <div class="btn-group">
 5     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 6        Sony
 7     </button>
 8     <div class="dropdown-menu">
 9       <a class="dropdown-item" href="#">Tablet</a>
10       <a class="dropdown-item" href="#">Smartphone</a>
11     </div>
12   </div>
13 </div>


مشاهدهٔ نتیجه


مرجع کامل Dropdown بوت استرپ ۴

برای دسترسی به مرجع همه امکانات منوی کرکره ای، متدها و رویدادها (Events)، به مرجع کامل JS Dropdown بوت استرپ ۴ مراجعه کنید.


منابع آموزشی