با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. یکی از عناصر بسیار پر کاربرد در وب سایت ها خصوصا بخش فرم های صفحات وب، منوی کشویی (dropdown) است. منوی کشویی، برای انتخاب از میان گزینه های مختلف از یک موضوع توسط کاربران در صفحات وب ، طراحی شده است. برای مثال، انتخاب از میان لیست شهرهای محل سکونت یا انتخاب از میان لیست رشته های تحصیلی و … گزینه های مناسبی برای پیاده سازی آنها در منوی کشویی در bootstrap 3 هستند. در ادامه ی آموزش جاری، شما را بیشتر با مبحث منوی کشویی dropdown در bootstrap 3 ، آشنا خواهیم کرد.
منوی کشویی dropdown در bootstrap 3 ،یک کشوی باز شونده است که به کاربران اجازه می دهد، از میان مقادیر لیست منو، انتخاب نمایند.
مثال:
1 2 3 4 5 6 7 8 9 | <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 را نشان می دهد.
برای باز کردن منوی dropdown از یک button یا یک link با کلاس .dropdown-toggle
و صفت data-toggle="dropdown"
استفاده کنید.
کلاس .caret
آیکون ( ) را ایجاد کرده و نمایش می دهد. که با کلیک روی این button لیست منو، نمایش داده می شود.
افزودن کلاس .dropdown-menu
به عنصر <ul>
در واقع عنصر والد منوی dropdown را می سازد.
برای ایجاد مرزهای نازک افقی بین لینک های گزینه های منوی dropdown است.
مثال:
1 | <li class="divider"></li> |
از کلاس .dropdown-header
برای ایجاد header در منوی کشویی در bootstrap 3،استفاده می شود.
مثال:
1 | <li class="dropdown-header">Dropdown header 1</li> |
آیتمی که در لیست منو از کلاس .active
استفاده کند، بصورت Highlight مشخص می شود.
برای مشخص کردن آیتم های غیر فعال، در لیست dropdown از کلاس .disabled
در آیتم مربوطه استفاده کنید.
مثال:
1 2 | <li class="disabled"><a href="#">CSS</a></li> <li class="active"><a href="#">HTML</a></li> |
برای اینکه با کلیک روی دکمه ی منوی dropdown لیست منو در سمت راست صفحه ظاهر شود، از کلاس .dropdown-menu-right
به همراه کلاس قبلی(.dropdown-menu
) در منوی والد (<ul>) استفاده کنید:
مثال:
1 | <ul class="dropdown-menu dropdown-menu-right"> |
اگر می خواهید که لیست منوی dropdown به سمت بالا باز شود، کلاس "dropup"
را به عنصر <div>
اضافه کنید:
مثال:
1 | <div class="dropup"> |
برای بهبود دسترسی کاربران به منوی dropdown از صفات role
وaria-*
هنگام ایجاد منوی dropdown، استفاده کنید:
مثال:
1 2 3 4 5 6 7 8 9 10 11 | <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> |
مباحث این آموزش بخوبی شما را با چگونگی ایجاد منوهای کشویی در bootstrap 3 و روشهای مختلف سفارشی کردن منو، آشنا می کند. امیدواریم که مباحث منوی کشویی dropdown در bootstrap 3 به اندازه کافی برای شما مفید بوده باشد.