آموزش بوت استرپ – قسمت سیزدهم – منوی کشویی در بوت استرپ

منوی کشویی پیشفرض
یک منوی کشویی، منوی بازشویی است که به کاربر اجازه می دهد یکی از آیتم های از پیش تعریف شده لیست را انتخاب کند.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

توضیح مثال بالا
کلاس dropdown یک منوی کشویی را نشان می دهد.
برای باز کردن منوی کشویی، از یک دکمه یا یک لینک با کلاس .dropdown-toggle و خصوصیت data-toggle=”dropdown” استفاده کنید.
کلاس caret یک آیکون فلش ایجاد می کند ،که نشان می دهد دکمه، منوی کشویی است.
کلاس dropdown-menu را به عنصر UL اضافه کنید تا منوی کشویی ساخته شود.

جدا کننده در منوی کشویی
کلاسdivider برای جدا کردن لینک ها داخل منوی کشویی با یک خط افقی نازک استفاده می شود:
مثال:

<li class="divider"></li>

سربرگ منوی کشویی

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

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

غیر فعال کردن یک آیتم در منوی کشویی

برای غیر فعال کردن یک آیتم در منوی کشویی، از کلاس disabled استفاده کنید:

<li class="disabled"><a href="#">CSS</a></li>

مکان منوی کشویی

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

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

منوی کشویی باز شونده به بالا

اگر می خواهید منوی کشویی برای گسترش به جای رو به پایین به سمت بالا باز شود، عنصر div با کلاس dropdown را به “dropup” تغییر دهید:
مثال:

<div class="dropup">

دسترسی منوی کشویی
برای کمک به بهبود قابلیت دسترسی برای افراد با استفاده از خوانندگان صفحه نمایش، شما باید از خصوصیات role و aria-* در هنگام ایجاد یک منوی کشویی بصورت زیر استفاده کنید:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
  <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>