Bootstrap Learning JS Plugin (drop-down menu (Dropdown) plugin)

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 bar

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

  Method

  The drop-down menu toggle has an easy way to show or hide the drop-down menu.

  $(). dropdown(' Toggle ')    

  Example

  The following example shows the use of the drop-down menu (Dropdown) Plug-in method:

  • <navclass="NavBar Navbar-default"role="Navigation"> <divclass="Navbar-header"> <aclass="Navbar-brand"href="#">W3Cschool</a> </div><div id= "Myexample" ><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 id="action-1"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> </div> </nav> </div><script> $ (function () {$ (". Dropdown-toggle"). Dropdown (' toggle ');    }); </script>

Bootstrap Learning JS Plugin (drop-down menu (Dropdown) plugin)