Bootstrap implements drop-down menu effect_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Bootstrap implements drop-down menu effect_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:02 PM

bootstrapDrop-down menu

Dropdown Menu A toggleable, contextual menu for displaying a list of links.

1. Case

Wrap the drop-down menu trigger and drop-down menu 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="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

You can find from the above code that there may be many unfamiliar style classes or attributes in it.

A Dropdown button and a small icon caret on the right side. Of course, the text of this small icon and the button are at the same level.

First of all, see that there is a dropdown-toggle in the button button, and there is also a data-toggle attribute. Based on this attribute, the dropdown list will pop up.

The dropdown-menu immediately following the ul tag should be used in conjunction with the style class dropdown-toggle of the button button above, and the button button above is bound by aria-labelledby.

There is a divider in the fourth li tag, which is actually a style class for dividing lines.

This is probably what I understand, and my understanding is definitely not in place.

2. Alignment options

Add .text-right to the dropdown menu .dropdown-menu to right-align the text.

 <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="presentation" 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 above code.

3. Title

A group of actions can be identified in any drop-down menu by adding a title.

 <h1 id="下拉菜单">下拉菜单</h1>
  <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" class="dropdown-header">Dropdown header</li>
  <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="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Mainly added

There is a .dropdown-header style class in it.

4. Disabled menu items

Add .disabled disable link to

in the drop-down menu.

Continue to modify the above code and replace the code in the Something else here line

Copy code The code is as follows:

Something else here

The main thing is to add the .disabled style class in the li tag.

You can check the effect after running it. In fact, the effect is similar to the title style above. When you click, a disabled icon will be displayed.

5. Basic case

1), button drop-down menu
You can make a drop-down menu trigger by placing any button in a .btn-group and adding the correct menu tags.

Single button dropdown menu

Just change some basic markup to turn a 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 drop-down menu

Similarly, a split-button dropdown requires the same change markup, but with a 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

You can only click the small icon to display the menu.

2), size

The drop-down menu button works with all button sizes.

<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 button size through style classes .btn-lg, .btn-sm, .btn-xs.

3), pop-up menu

Add .dropup to the parent element to make the triggered 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>

For more information, please refer to: Bootstrap learning tutorial

Summary:

This article mainly introduces the relevant content of the drop-down menu, and then introduces the combination of buttons and drop-down menus. There are quite a few changes and the style is good. I hope you like it.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn