منوی کشویی (Dropdowns)

«منوی کشویی (Dropdown)» منویی بازشونده است. کاربر از میان گزینه ها انتخاب می کند. «Toggle» یعنی دکمه ای که منو را باز و بسته می کند. مثل منوی انتخاب کلاس در سامانه مدرسه.

منوی کشویی پایه

یک ظرف با کلاس .dropdown بساز. سپس دکمه با .dropdown-toggle و ویژگی data-bs-toggle="dropdown" اضافه کن. بعد فهرست با .dropdown-menu و هر گزینه با .dropdown-item.

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

مشاهده در ادیتور

جداکننده در منو

با .dropdown-divider بین گزینه ها یک خط باریک بساز.

<li><hr class="dropdown-divider"></hr></li>

مشاهده در ادیتور

سربرگ داخل منو

با .dropdown-header یک عنوان توضیحی برای گروه گزینه ها بگذار.

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

مشاهده در ادیتور

وضعیت فعال و غیرفعال

برای برجسته سازی از .active استفاده کن. برای غیرفعال سازی از .disabled بهره ببر.

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

مشاهده در ادیتور

جهت بازشدن: راست و چپ

برای بازشدن به راست از .dropend و برای چپ از .dropstart روی ظرف .dropdown استفاده کن.

<div class="dropdown dropend"></div>
<div class="dropdown dropstart"></div>

مشاهده در ادیتور

مشاهده در ادیتور

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

برای راست چین شدن خود منو از .dropdown-menu-end استفاده کن.

<div class="dropdown-menu dropdown-menu-end"></div>

مشاهده در ادیتور

بازشدن رو به بالا

اگر فضا کم است، از ظرف .dropup استفاده کن تا منو بالا باز شود.

<div class="dropup"></div>

مشاهده در ادیتور

متن ساده در منو

برای متن غیرلینکی از .dropdown-item-text بهره ببر. گاهی لینک با استایل پیش فرض می خواهی.

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

مشاهده در ادیتور

گروه دکمه همراه منو

می توانی کنار دکمه ها یک منوی کشویی بسازی. این کار دسته بندی را راحت می کند.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Tablet</a></li>
      <li><a class="dropdown-item" href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

مشاهده در ادیتور

گروه عمودی با منو

برای چیدمان ستونی از .btn-group-vertical استفاده کن. سپس همان الگوی منوی کشویی را تکرار کن.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Tablet</a></li>
      <li><a class="dropdown-item" href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

مشاهده در ادیتور

نکته: قبل از ساخت منوی پیچیده، کارت ها را مرور کن: کارت ها. همچنین برای بخش های تاشو، صفحه Collapse را ببین. اگر نیاز داری، همین صفحه منوی کشویی بوت استرپ را به عنوان راهنمای سریع نشانه گذاری کن.

گام های تمرینی

1. یک .dropdown بساز و سه گزینه اضافه کن.
2. جداکننده و سربرگ مناسب قرار بده.
3. یک گزینه را فعال و یکی را غیرفعال کن.
4. جهت را به .dropend تغییر بده.
5. یک گروه دکمه با منو بساز.

جمع بندی سریع

• .dropdown ظرف منو است.
• .dropdown-toggle با data-bs-toggle منو را باز می کند.
• .dropdown-menu فهرست گزینه هاست.
• جهت با .dropend، .dropstart و .dropup تغییر می کند.
• راست چینی با .dropdown-menu-end انجام می شود.