منوی کشویی اولیه (Basic Dropdown)
منوی dropdown یا کشویی یک منوی تبدیل پذیر است که به کاربر اجازه می دهد مقدار خاصی را از یک لیستِ از پیش تعریف شده انتخاب نماید. به مثال پایین توجه کنید
کلاسِ .dropdown بیانگرِ یک منوی کشویی(Dropdown) است.
برای باز کردنِ منوی کشویی(Dropdown)، از یک کلید یا لینک به همراه کلاسِ .dropdown-toggle و ویژگیِ data-toggle="dropdown"استفاده نمایید.
کلاسِ .caret موجب ایجاد یک آیکنِ اشاره گرِ caret می شود. این آیکن نشان گرِ این است که دکمه از نوعِ کشویی می باشد.
برای ایجاد منوی کشویی(Dropdown)، کلاسِ .dropdown-menu را به عنصرِ <ul> اضافه کنید.
تقسیم کننده ی منوی کشویی
برای جدا کردنِ لینک های موجود در یک منوی کشویی(DropDown)، از کلاسِ divider استفاده می شود
عنوان منوی کشویی(Dropdown Header)
به منظورِ افزودنِ عنوان (Header) در درونِ منوی کشویی(Dropdown)، از کلاسِ dropdown-header استفاده می گردد
غیر فعال کردن یک آیتم
برای غیر فعال کردنِ یک آیتم یا لینک در منوی کشایی، از کلاسِ .disabled استفاده نمایید
موقعیت یک منوی کشویی
برای راست چین کردنِ منوی کشویی، کلاسِ .dropdown-menu-right را اضافه کنید
DropUP
اگر بخواهید منوی کشویی(Dropdown) شما به جای نمایش آیتم ها به سمت پایین، آنها را به سمت بالا نمایش دهد، عنصرِ <div> را به جای استفاده با "dropdown" ، با کلاسِ "dropup" به کار بگیرید
نمونه 6
دستیابی به منوی کشویی (DropDown)
برای کمک به ارتقاءِ دستیابی برای افرادی که از screen reader استفاده می کنند، به هنگام ایجاد یک منوی کشویی باید ویژگی های role و aria-*را اضافه نمایید:
-
4452
-
902
-
تاریخ ارسال
:
1395/10/12
دانلود PDF
دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور:
tahlildadeh.com یا www.tahlildadeh.com
لطفا به این مطلب امتیاز دهید
ارسال دیدگاه
نظرات کاربران