منوی کشویی در بوت استرپ
منوی کشویی پایه در بوت استرپ چیست؟
یک منوی کشویی، درواقع منویی است که، به کاربر این امکان را می دهد تا یک مقدار را از یک لیست از پیش تعریف شده انتخاب کند:
مثال
<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> استفاده کنیم.
جدا کننده ی منوی کشویی در بوت استرپ
با استفاده از کلاس divider. می توانید گزینه های درون منوی کشویی را از یکدیگر جدا کنید:
سرفصل منوی کشویی در بوت استرپ
غیر فعال کردن یک آیتم در منوی کشویی بوت استرپ
برای غیرفعال کردن یک آیتم درون منوی کشویی، از کلاس disabled. استفاده کنید:
موقعیت منوی کشویی در بوت استرپ
دسترسی به منوی کشویی در بوت استرپ
برای بهتر کردن دسترسی کسانی که از صفحه خوان ها استفاده می کنند، بایستی خصوصیات role و *-aria را به هنگام ایجاد یک منوی کشویی، اضافه کنید:
مثال
<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 »
- نوشته شده توسط احسان عباسی
- بازدید: 23205
دیدگاه‌ها
سلام اگر بخواهیم به محض اینکه موس روی منو قرار گرفت باز بشه و با خارج شدن موس کشو بسته بشه باید چیکار کرد.؟
ممنون بابت سایت فوق العاده تون
سلام. برای انجام این کار، سایت زیر یک فایل CSS و یک فایل JS ارائه داده، که شما می توانید با استفاده از دستورالعمل داده شده، به سادگی اون رو به بوت استرپ خودتون اضافه کنید تا منوهای کشویی قابلیت hover پیدا کنند.
kybarg.github.io/bootstrap-dropdown-hover/
سلام. قسمت آخر رو اگه میشه توضیح بدین. دسترسی به منوی کشویی دقیقا چه کاری انجام میده؟ چه تغییری تو منو ایجاد میشه؟
سلام . فرض کنید کسانی که نابینا هستند، بخواهند به سایت شما وارد شوند و مطالب را مطالعه کنند( با استفاده از صفحه خوان ها). خب حالا اگر که این فرد نابینا بخواهد منوی شما رو بفهمه، باید مثلا برای قسمت درباره ی ما، در منوی شما، از کلمه ی About Us مخصوص صفحه خوان ها استفاده شود. پس با استفاده از خصوصیت "role="menuitem در داخل یک عنصر این کار رو انجام می دهیم تا توسط صفحه خوان، کلمه ی About Us برای فرد نابینا خوانده شود.
سلام خسته نباشید
آموزش منوی کشویی عالی بود.
آموزش خوبی بود.
سلام ببخشید اون قسمت اخر دسترسی به منوی کشویی اون کلمه هایی که داخل role استفاده کردین توی li دقیقا چین متوجه نشدم ممنون میشم توضیح بدین.راستی ممنون از سایت خوبتون
با سلام.
در واقع این کلمه نقش رو تعیین می‌کنه. این خصیصه معمولا در بوت‌استرپ زیاد به کار می‌ره (البته جاهای دیگه هم هست).