سبد (0)

تبلیغات

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

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

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

مثل

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

امتحان کنید »


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

Wiki

disabledDropdownItem

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

مثال

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

امتحان کنید »


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

Wiki

مثال

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

دیدگاه‌ها  

+2 # elham69 1395-11-21 09:51
سلام اگر بخواهیم به محض اینکه موس روی منو قرار گرفت باز بشه و با خارج شدن موس کشو بسته بشه باید چیکار کرد.؟
ممنون بابت سایت فوق العاده تون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-11-21 19:12
سلام. برای انجام این کار، سایت زیر یک فایل CSS و یک فایل JS ارائه داده، که شما می توانید با استفاده از دستورالعمل داده شده، به سادگی اون رو به بوت استرپ خودتون اضافه کنید تا منوهای کشویی قابلیت hover پیدا کنند.
kybarg.github.io/bootstrap-dropdown-hover/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # آزی 1395-08-09 11:11
سلام. قسمت آخر رو اگه میشه توضیح بدین. دسترسی به منوی کشویی دقیقا چه کاری انجام میده؟ چه تغییری تو منو ایجاد میشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1395-08-09 11:37
سلام . فرض کنید کسانی که نابینا هستند، بخواهند به سایت شما وارد شوند و مطالب را مطالعه کنند( با استفاده از صفحه خوان ها). خب حالا اگر که این فرد نابینا بخواهد منوی شما رو بفهمه، باید مثلا برای قسمت درباره ی ما، در منوی شما، از کلمه ی About Us مخصوص صفحه خوان ها استفاده شود. پس با استفاده از خصوصیت "role="menuitem در داخل یک عنصر این کار رو انجام می دهیم تا توسط صفحه خوان، کلمه ی About Us برای فرد نابینا خوانده شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # elnaz 1395-06-29 15:25
سلام خسته نباشید
آموزش منوی کشویی عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Heimn validi 1395-04-25 15:25
آموزش خوبی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # shima میرزاپور 1395-04-01 19:48
سلام ببخشید اون قسمت اخر دسترسی به منوی کشویی اون کلمه هایی که داخل role استفاده کردین توی li دقیقا چین متوجه نشدم ممنون میشم توضیح بدین.راستی ممنون از سایت خوبتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-04-05 14:02
با سلام.
در واقع این کلمه نقش رو تعیین می‌کنه. این خصیصه معمولا در بوت‌استرپ زیاد به کار می‌ره (البته جاهای دیگه هم هست).
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی