BootstrapDrop -down menu (Dropdown) plugin
Bootstrap drop-down Menu This chapter explains the drop-down menu, but does not involve the interactive part, this chapter will explain the interaction of the dropdown menu. Using the drop-down menu (Dropdown) plugin, you can add a drop-down menu to any component (such as navigation bar, tab, Capsule navigation menu, button, etc.).
usage
You can toggle the hidden content of the drop-down menu (Dropdown) Plugin:
- with the Data property : Add data-toggle= "dropdown" to the link or button to toggle the drop-down menu as follows:
class="dropdown"> <a data-toggle="dropdown" href="#"> drop-down menu trigger </a> class=" Dropdown-menu "role="menu"aria-labelledby=" Dlabel " > </ul> </div>
Exampleinside the navigation barThe following example shows the use of the drop-down menu in the navigation bar:
<navclass="NavBar Navbar-default"role="Navigation"> <divclass="Navbar-header"> <aclass="Navbar-brand"href="#">W3cschool</a> </div> <ulclass="nav Navbar-nav"> <liclass="Active"><a href="#">ios</a></li> <li><a href="#">SVN</a></li> <liclass="dropdown"> <a href="#" class="Dropdown-toggle"data-toggle="dropdown">Java<bclass="Caret"></b> </a> <ulclass="Dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">jasper report</a></li> <liclass="Divider"></li> <li><a href="#"> Separated links </a></li> <liclass="Divider"></li> <li><a href="#"> Another separate link </a></li> </ul> </li> </ul> </nav>
- In the label page
The following example shows the use of a drop-down menu within a tab:
<p> tabs with drop-down menus </p> <ulclass="nav nav-tabs"> <liclass="Active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <liclass="dropdown"> <aclass="Dropdown-toggle"data-toggle="dropdown"href="#">Java<spanclass="Caret"></span> </a> <ulclass="Dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <liclass="Divider"></li> <li><a href="#"> Separated links </a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul>
- Options
There are no options.
MethodThe drop-down menu toggle has an easy way to show or hide the drop-down menu.
$(). dropdown(' Toggle ')
ExampleThe following example shows the use of the drop-down menu (Dropdown) Plug-in method:
Bootstrap Learning JS Plugin (drop-down menu (Dropdown) plugin)