منوهای آبشاری

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


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

منوی کرکره‌ای یک منوی باز و بسته شونده است که کاربر می‌تواند در یک لیست از پیش تعیین شده، یک مورد را انتخاب کند:[۱]


مثال

<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>


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


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

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

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

مثال

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


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


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

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

مثال

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


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


بازشونده رو به بالا (Dropup)

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

مثال

<div class="dropup">


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


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

برای بهبود دسترس پذیری کاربرانی که از صفحه خوان (Screen Reader) استفاده می‌کنند، هنگام ایجاد یک منوی کرکره‌ای، باید ویژگی‌های 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>


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


مرجع کامل منوی کرکره ایبوت استرپ

برای دستیابی به مرجع کامل همهٔ امکانات منوی کرکره‌ای، متد‌ها و رویداد‌ها، به مرجع منوی کرکره‌ای JS بوت استرپ ما مراجعه کنید.

منابع آموزشی