Home > Web Front-end > JS Tutorial > body text

Bootstrap implements drop-down menu effect_javascript skills

WBOY
Release: 2016-05-16 15:02:51
Original
1893 people have browsed it

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>

Copy after login

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>
Copy after login

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>下拉菜单</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>
Copy after login

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:

  • 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>
    
    
    Copy after login

    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
    
    Copy after login

    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>
    
    
    Copy after login

    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>
    
    
    Copy after login

    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.

    Related labels:
    source:php.cn
    Statement of this Website
    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
    Popular Recommendations
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template