منوی کشویی پایه در بوت استرپ چیست؟

Wiki

یک منوی کشویی، درواقع منویی است که، به کاربر این امکان را می دهد تا یک مقدار را از یک لیست از پیش تعریف شده انتخاب کند:

dropDown

 

مثال

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">مثال منوی کشویی
  <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> استفاده کنیم.

جدا کننده ی منوی کشویی در بوت استرپ

Wiki

با استفاده از کلاس divider. می توانید گزینه های درون منوی کشویی را از یکدیگر جدا کنید:

مثال

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

امتحان کنید »

 سرفصل منوی کشویی در بوت استرپ

Wiki

dropDownHeader

از کلاس dropdown-header. برای اضافه کردن سرفصل ها، درون منوی کشویی استفاده می شود:

مثل

<li class="dropdown-header">سرفصل منوی 1</li>

امتحان کنید »

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

Wiki

disabledDropdownItem

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

مثال

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

امتحان کنید »

 موقعیت منوی کشویی در بوت استرپ

Wiki

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

مثال

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

امتحان کنید »
upDropdown
اگر تمایل دارید که منوی کشویی به جای باز شدن به سمت پایین، به سمت بالا باز شود، کافی است که کلاس عنصر <div> با کلاس drop-down را به dropup تغییر دهید:

مثال

<div class="dropup">

امتحان کنید »

 دسترسی به منوی کشویی در بوت استرپ

Wiki

برای بهتر کردن دسترسی کسانی که از صفحه خوان ها استفاده می کنند، بایستی خصوصیات 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>

امتحان کنید »

 با تمرین خودتان را محک بزنید!

تمرین 1 »  تمرین 2 »  تمرین 3 »  تمرین 4 »  تمرین 5 »