منوهای بازشونده در بوت استرپ ( بررسی کامل )

توسط : اشکان مولودیدر: بهمن ۱۳, ۱۳۹۷در: آموزش بوت استرپبدون دیدگاه

در این جلسه از دوره آموزش بوت استرپ به بررسی منوهای بازشونده در بوت استرپ می پردازیم.

منوهای بازشونده در بوت استرپ :

منوهای باز شونده یکی از مباحث مهم در یادگیری بوت استرپ هستند که می توانند برای طراح سایت بسیار کاربردی باشند.منوهای بازشونده منو هایی قابل تنظیم هستند که به کاربر اجازه می دهندیک زیر مجموعه از لیست از پیش تعریف شده را به دلخواه انتخاب کند.روش ساختن این منو ها را قبلا در دوره آموزش css برای شما عزیزان توضیح داده ایم.

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

<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 یک منوی کشویی را تعریف می کند.اگر این کلاس را به لایه اعمال نکنید زمانی که روی دکمه کلیک می کنید منو باز نمی شود.
برای بازکردن منوی کشویی از یک دکمه کلاس “data-toggle=”dropdown را به دکمه اعمال کنید.
برای ایجاد فلش درون دکمه که نمایش میدهد منو کشویی است از کلاس caret استفاده شده است.
برای اینکه زیر منو ها به صورت کشویی درآید کلاس dropdown-menu را به ul اضافه کنید.

کلاس DIVIDER :

این کلاس زیرمنوهای درون منوی کشویی را جدا می کند.
فرض کنید که می خواهید۳تالینک اول از لینک های بعدی جداشوند.
برای این کار می توانید ازیک تگ li با این کلاس استفاده کنید.

در مثال زیر این موضوع مورد بررسی قرار گرفته است.

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<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>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>

کلاس DROPDOWN-HEADER :

دربوت استرپ این امکان تعریف شده است که برای زیرمنو هادر منوهای بازشونده هدر تعریف کنید.برای تعریف هدر از کلاس dropdown-header استفاده کنید.

در مثال زیر این موضوع بررسی شده است.

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header 2</li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>

کلاس های ACTIVE و DISABLED :

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

کلاس active زیر منو را فعال می کند.
کلاس disabled زیر منو را غیر فعال می کند.

به مثال زیر دقت کنید.

<div class="container">
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item (grey text color).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Normal</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
<li class="active"><a href="#">Active</a></li>
<li><a href="#">Normal</a></li>
</ul>
</div>
</div>

کلاس DROPDOWN-MENU-RIGHT :

برای کشیدن به راست زیر منوها کلاس dropdown – menu – right رابه عنصر ul با کلاس dropdown – menu اضافه کنید.

<div class="container">
<h2>Dropdowns</h2>
<p>Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>

دقت کنید که زیرمنوها دیگر در زیر منوی اصلی باز نشده اند بلکه در سمت راست نمایش داده شده اند.

کلاسDROPUP :

در بوت استرپ این امکان از پیش تعریف شده است که با کلاس dropup منو را به سمت بالا باز کرد.

در مثال زیر این مورد بررسی شده است.

<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup 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>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>

ویژگی ROLE و ARIA-LABELLEDBY :

کسانی هستند که از صفحه خوان ها استفاده می کنند(مثلا افراد نابینا) برای اینکه این اشخاص دسترسی بهتری داشته باشند خصوصیات role و aria-labelledby به منوهای کشویی اضافه کنید.در جلسات پیش در مورد آنها توضیح داده شده است.

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

همین الان می خوام محصول رو تهیه کنم

اشکان مولودی

می توانم بگویم که برنامه نویسی وب و بازاریابی اینترنتی را ازهرکاری در دنیا بیشتر دوست دارم و همین علاقه موجب شد که همراه آی سی تی را راه اندازی کنم تا اندک دانشی را که در این اقیانوس بیکران صفر و یک دارم با شما عزیزان به اشتراک بگذارم.