آموزش منوی کشویی بوت استرپ-BootStrap Dropdown

منوی کشویی اولیه (Basic Dropdown)

منوی dropdown یا کشویی یک منوی تبدیل پذیر است که به کاربر اجازه می دهد مقدار خاصی را از یک لیستِ از پیش تعریف شده انتخاب نماید. به مثال پایین توجه کنید

  Dropdown Example
  
  

    
HTML
    
CSS
    
JavaScript
  

کلاسِ .dropdown بیانگرِ یک منوی کشویی(Dropdown) است.
برای باز کردنِ منوی کشویی(Dropdown)، از یک کلید یا لینک به همراه کلاسِ .dropdown-toggle و ویژگیِ data-toggle="dropdown"استفاده نمایید.
کلاسِ .caret موجب ایجاد یک آیکنِ اشاره گرِ caret می شود. این آیکن نشان گرِ این است که دکمه از نوعِ کشویی می باشد.
برای ایجاد منوی کشویی(Dropdown)، کلاسِ .dropdown-menu را به عنصرِ <ul> اضافه کنید.

تقسیم کننده ی منوی کشویی

برای جدا کردنِ لینک های موجود در یک منوی کشویی(DropDown)، از کلاسِ divider استفاده می شود

عنوان منوی کشویی(Dropdown Header)

به منظورِ افزودنِ عنوان (Header) در درونِ منوی کشویی(Dropdown)، از کلاسِ dropdown-header استفاده می گردد

Dropdown header 1

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

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

CSS
HTML

موقعیت یک منوی کشویی

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

DropUP

اگر بخواهید منوی کشویی(Dropdown) شما به جای نمایش آیتم ها به سمت پایین، آنها را به سمت بالا نمایش دهد، عنصرِ <div> را به جای استفاده با "dropdown" ، با کلاسِ "dropup" به کار بگیرید

دستیابی به منوی کشویی (DropDown)

برای کمک به ارتقاءِ دستیابی برای افرادی که از screen reader استفاده می کنند، به هنگام ایجاد یک منوی کشویی باید ویژگی های role و aria-*را اضافه نمایید:

  Tutorials
  
  

    
HTML
    
CSS
    
JavaScript
    

    
About Us