Bootstrap to realize _javascript technique of pull-down menu effect

The Drop-down menu is used to display a toggle, contextual menu of linked lists.

1. Case

Wrap the Drop-down menu triggers and Drop-down menus in. Dropdown, and then add the HTML code that makes up the menu.

 <div class= "dropdown" >
 <button class= "btn dropdown-toggle" type= "button" id= "DropdownMenu1" Data-toggle = "Dropdown" >
 dropdown
 <span class= "caret" ></span>
 </button>
 <ul class= " Dropdown-menu "role=" menu "aria-labelledby=" dropdownMenu1 ">
 <li role=" presentation "><a role=" MenuItem "tabindex="-1 "href=" # ">Action</a></li>
 <li role=" presentation "><a role=" MenuItem "tabindex="-1 "href=" # ">another action</a></li> <li role=
 " Presentation "><a Role= "MenuItem" tabindex= "-1" href= "#" >something else here</a></li> <li "role="
 class= "Divider" ></li>
 <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Separated link</a></li>
 </ul>
 </div>

You can see from the code above that there may be a lot of unfamiliar style classes or attributes.

A dropdown button and a small icon on the right side of the caret, of course, the small icon and the text of the button is a peer.

First look at the button, there is a dropdown-toggle, there is a Data-toggle property, based on this property to pop down the list.

Then the dropdown-menu of the UL label should be used in conjunction with the style class Dropdown-toggle of button buttons above, the button on the top of the aria-labelledby binding.

Down the fourth Li tag has a divider is actually a split line style class.

Probably I understand this kind of appearance, the understanding certainly is not in place.

2, alignment options

Add. dropdown-menu to the Drop-down menu. Text-right to align the text to the right.

 <div class= "dropdown" >
 <button class= "btn dropdown-toggle" type= "button" id= "DropdownMenu1" Data-toggle = "Dropdown" >
 dropdown
 <span class= "caret" ></span>
 </button>
 <ul class= " Dropdown-menu text-right "role=" menu "aria-labelledby=" dropdownMenu1 ">
 <li role=" Presentation "><a Role= "MenuItem" tabindex= "-1" href= "#" >Action</a></li>
 <li role= "presentation" ><a role = "MenuItem" tabindex= "-1" href= "#" >another action</a></li> <li role=
 "Presentation" ><a Role= "MenuItem" tabindex= "-1" href= "#" >something else here</a></li> <li "role="
 class= "Divider" ></li>
 <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Separated link</a></li>
 </ul>
 </div>

Just add a Text-right style class to the UL tag in the code above.

3. Title

The

can indicate a set of actions in any Drop-down menu by adding a caption.

The main is to add the <li role= "presentation" class= "Dropdown-header" >dropdown header</li> there is a. Dropdown-header style class.

4. Disabled menu Items

Disable links for <li> Plus. Disabled in the Drop-down menu.

Continue to modify the above code to replace the something else here Line code

Copy Code code as follows:

<li class= "Disabled" role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" >something else here </a></li>

The main is to add the. Disabled style class to the LI tag.

You can see the effect after you run, in fact, the effect and the above title style is similar, when you click on a disabled icon to display.

5. Basic cases

1), Button pull-down menu
Put any button into the. Btn-group and then add the correct menu tag, you can make a drop-down menu trigger.

Single Button Pull-down Menu

As long as you change some basic tags, you can turn the button into a drop-down menu switch.

<div class= "Btn-group" >
 <button type= "button" class= "btn btn-default" Dropdown-toggle data-toggle= " Dropdown ">
 Action <span class=" caret "></span>
 </button>
 <ul class=" Dropdown-menu "role=" menu ">
 <li><a href=" # ">Action</a></li>
 <li><a href= "#" >another action</a></li>
 <li><a href= "#" >something Else here</a></ li>
 <li class= "divider" ></li>
 <li><a href= "#" >separated link</a></li >
 </ul>
</div>

Split-button Pull-down menu

Similarly, the Split-button Pull-down menu also requires the same change mark, but only one more separate button.

<div class= "Btn-group" >
  <button type= "button" class= "btn Btn-danger" >Action</button>
  <div class= "dropdown" >
  <button type= "button" class= "btn Btn-danger" Dropdown-toggle data-toggle= " Dropdown ">
  <span class=" caret "></span>
  <span class=" sr-only ">toggle dropdown</ span>
  </button>
  <ul class= "Dropdown-menu" role= "menu" >
  <li><a href= "#" > action</a></li>
  <li><a href= "#" >another action</a></li>
  <li> <a href= "#" >something else here</a></li>
  <li class= "divider" ></li>
  <li ><a href= "#" >separated link</a></li>
  </ul>
  </div>
 </div

Only click on the Small icon to appear menu amount.

2), size

The Drop-down menu button applies to all dimensions of the button.

<div class= "Btn-group" > <button class= "btn btn-default btn-lg dropdown-toggle"
 type= "button" Data-toggle = "Dropdown" >
 Large button <span class= "Caret" ></span>
 </button>
 <ul class= " Dropdown-menu "> ...
 </ul>
</div>

<!--Small button group-->
<div class= "Btn-group" >
 < Button class= "btn btn-default btn-sm dropdown-toggle" type= "button" data-toggle= "dropdown" >
 Small button < Span class= "Caret" ></span>
 </button>
 <ul class= "Dropdown-menu" > ...
 </ul>
</div>

<!--Extra small button group-->
<div class= "Btn-group" >
 <button class= "btn btn-default btn-xs dropdown-toggle" type= "button" data-toggle= "dropdown" >
 Extra Small Button <span class= "Caret" ></span>
 </button>
 <ul class= "Dropdown-menu" >
 ...
 </ul>
</div>

Control the size of the button by style class. Btn-lg,. Btn-sm,. Btn-xs.

3), Up pop-up menu

Add. Dropup to the parent element to make the trigger Drop-down menu above the element.

<div class= "Btn-group dropup" >
 <button type= "button" class= "Btn Btn-default" >Dropup</button>
 <button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" >
 <span class= "Caret" ></span>
 <span class= "sr-only" >toggle dropdown</span>
 </button>
 <ul class= "Dropdown-menu" >
 <!--dropdown menu links-->
 </ul>
</div>

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

This article mainly introduced the Pull-down menu related content, then introduced the button and the Drop-down menu combination, the change is quite many, the style is also good, hoped everybody likes.