Latest web development tutorials

Bootstrap dropdown menu (Dropdown) widget

Bootstrap dropdown menu This chapter explains the drop-down menu, but not related to the interaction part, this chapter will explain in detail the interaction of the drop-down menu. Use the pull-down menu (Dropdown) plug-in, you can add a drop-down menu to any of the components (such as navigation bar, tabs, capsules, navigation menus, buttons, etc.).

If you want to refer to the individual plug-in features, you need to referencedropdown.js.Or, as Bootstrap plugin Overview chapter mentioned, you can refer tobootstrap.jsor compressed version ofbootstrap.min.js.

usage

You can toggle hide dropdown menu (Dropdown) plug-in:

  • Through data attributes: a link or button to add data-toggle = "dropdown"drop-down menu to switch, as follows: 
    <Div class = "dropdown">
  <a data-toggle="dropdown" href="#"> drop-down menu (Dropdown) trigger </a>
  <Ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ...
  </ Ul>
</ Div>

    If you need to keep the link intact (useful when the browser is not enabled JavaScript), please usedata-target attribute instead of href = "#":

    <Div class = "dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Pull-down menu (Dropdown) <span class = "caret"> </ span>
  </a>


  <Ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ...
  </ Ul>
</ Div>
  • By JavaScript: JavaScript by calling the drop-down menu to switch, please use the following method:
    $ ( '. Dropdown-toggle'). Dropdown ()

Examples

In the navigation bar

The following example demonstrates the use of the navigation bar drop-down menu:

Examples

<Nav class = "navbar navbar-default" role = "navigation"> <Div class = "container-fluid"> <Div class = "navbar-header"> <A class = "navbar-brand" href = "#"> tutorial </ a> </ Div> <Div> <Ul class = "nav navbar-nav" > <Li class = "active"> <a href = "#"> iOS < / a> </ li> <Li> <a href = "#"> SVN < / a> </ li> <Li class = "dropdown"> <A href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> Java <b class = "caret"> </ b> </ A> <Ul class = "dropdown-menu"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Jasper Report </ a> </ li> <Li class = "divider"> </ li> <Li> <a href = "#"> isolated link </ a> </ li> <Li class = "divider"> </ li> <Li> <a href = "#"> another isolated link </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

try it"

The results are as follows:

In a tab within

The following example demonstrates the use of the tab in the drop-down menu:

Examples

<P> tag with a page pull-down menu </ p> <Ul class = "nav nav-tabs" > <Li class = "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> <Li class = "dropdown"> <A class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Java < span class = "caret"> </ span> </ a> <Ul class = "dropdown-menu"> <Li> <A href = "#"> Swing < / a> </ li> <Li> <A href = "#"> jMeter < / a> </ li> <Li> <A href = "#"> EJB < / a> </ li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ a> </ li> </ Ul> </ Li> <Li> <A href = "#"> PHP < / a> </ li> </ Ul>

try it"

The results are as follows:

Tabs with dropdown menu

Options

There are no options.

method

Drop-down menu to switch there is a simple way to display or hide the drop-down menu. 

$ (). Dropdown ( 'toggle')

Examples

The following example demonstrates the pull-down menu (Dropdown) plug-in method:

Examples

<Nav class = "navbar navbar-default" role = "navigation"> <Div class = "container-fluid"> <Div class = "navbar-header"> <A class = "navbar-brand" href = "#"> W3Cschool < / a> </ Div> <Div id = "myexample"> <Ul class = "nav navbar-nav" > <Li class = "active"> <A href = "#"> iOS < / a> </ Li> <Li> <A href = "#"> SVN < / a> </ Li> <Li class = "dropdown"> <A href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> Java <b class = "caret"> </ b> </ A> <Ul class = "dropdown-menu"> <Li> <A id = "action-1" href = "#"> jmeter < / a> </ Li> <Li> <A href = "#"> EJB < / a> </ Li> <Li> <A href = "#"> Jasper Report </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> another isolated link </ a> </ Li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav> </ Div> <Script> $ (function () {$ ( "dropdown-toggle.") Dropdown ( 'toggle');.}); </ Script>

try it"

The results are as follows:

Fixed to the top