Home > Developer > JavaScript

Bootstrap drop-down menu and bootstrap drop-down list

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Bootstrap drop-down menu and bootstrap drop-down list
Previous

Context Menu or hide/display menu items are often required for webpage interaction. Bootstrap provides context menus for displaying the link list by default. In addition, menu display in various interactive states must be used with the javascript plug-in. This topic describes the Bootstrap drop-down menu in detail.

 

Usage

When using the Bootstrap framework drop-down menu, you must call the Bootstrap. js file provided by the bootstrap framework. Of course, if you are using an uncompiled version, you can find a file named "dropdown. js" in the js folder or call this js file.

Because the Interaction Effect of Bootstrap components is dependent on the plug-ins written by the jQuery library, you must load jquery. js before using bootstrap. js to produce results.

<!DOCTYPE html>

 
Basic usage

When using the drop-down menu component in the Bootstrap framework, whether the structure is correctly applied is very important. If the structure and class name are not correctly used, it directly affects whether the component can be used normally.


1. Use a container named "dropdown" to wrap the entire drop-down menu Element


<div class="dropdown"></div>


2. A <button> button is used as the parent menu, and the class name "dropdown-toggle" and custom "data-toggle" attributes are defined. The value must be consistent with the outermost class name.


<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">


3. The drop-down menu item uses an ul list and defines a class named "dropdown-menu"


<ul class="dropdown-menu" role="menu">


<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    Dropdown    <span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>  </ul></div>




4. Set the parent element of the drop-down menu.dropupClass to bring up the menu (by default, it is down)


<div class="dropup">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    Dropup    <span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>  </ul></div>




 
Principle Analysis

In the Bootstrap framework, the drop-down menu items are hidden by default, because "display: none" is set for the "dropdown-menu" Default style. When you click the parent menu item, the drop-down menu is displayed. When you click again, the drop-down menu is hidden.


. Dropdown-menu {position: absolute;/* sets absolute positioning, relative to the parent element div. dropdown */top: 100%;/* place the drop-down menu item at the bottom of the parent menu item. If the parent element is not set to relative positioning, this element is relative to the body element */left: 0; z-index: 1000;/* Hide the drop-down menu item from other elements */display: none;/* Hide the drop-down menu item by default */float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; list-style: none; background-color: # fff; background-clip: padding-box; border: 1px solid # ccc; border: 1px solid rgba (0, 0, 0 ,. 15); border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba (0, 0, 0 ,. 175); box-shadow: 0 6px 12px rgba (0, 0, 0 ,. (175 );}


Now let's analyze the implementation principle, which is very simple. By using js technology, add or remove the class name "open" to the parent container "div. dropdown" to control the display or hide of the drop-down menu. That is to say, by default, "div. "dropdown" does not have the class name "open". When the user clicks for the first time, "div. dropdown adds the class name "open". When the user clicks again, "div. the class name "open" in the dropdown "container will be removed.


.open > .dropdown-menu {  display: block;}


 
Extended usage

[Separator]


In the Bootstrap framework, the drop-down menu provides a drop-down separator. If there are two groups in the drop-down menu, you can add an empty <li> between the group and the group, add the class name "divider" to <li> to add the drop-down separator.


.dropdown-menu .divider {  height: 1px;  margin: 9px 0;  overflow: hidden;  background-color: #e5e5e5;}


<li role="separator" class="divider"></li>


<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    Dropdown    <span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div>




[Menu title]


You can add titles to indicate a group of actions in any drop-down menu.


<li class="dropdown-header">Dropdown header</li>


.dropdown-header {  display: block;  padding: 3px 20px;  font-size: 12px;  line-height: 1.42857143;  color: #999;}


<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown" aria- haspopup = "true" aria-expanded = "true"> Dropdown <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation" class = "dropdown-header"> Part 1 menu header </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href =" # "> drop-down menu item </a> </li> <li role =" presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role = "presentation" class = "divider"> </li> <li role = "presentation" class = "dropdown-header"> Part 2 menu header </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> </ul> </div>




[Alignment mode]


In the Bootstrap framework, the drop-down menu is left aligned by default. to align the drop-down menu to the right of the parent container, you can add a "dropdown-menu-right" class name on "dropdown-menu ".


.dropdown-menu-right {  right: 0;  left: auto;}


Because <div class = "dropdown"> is a block-level element by default, the parent-Level Width is full. Here, you need to set inline-block and margin-left for this element to open the content width and have a certain distance from the left.


    display: inline-block;    margin-left: 60px;


<Div class = "dropdown" style = "display: inline-block; margin-left: 60px; "> <button class =" btn-default dropdown-toggle "type =" button "id =" dropdownMenu1 "data-toggle =" dropdown "aria-haspopup =" true "aria -expanded = "true"> Dropdown <span class = "caret"> </span> </button> <ul class = "dropdown-menu-right" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </> </li> <li role = "presentation" class = "divider"> </li> <li role = "presentation"> <a role = "menuitem" tabindex =" -1 "href =" # "> drop-down menu item </a> </li> </ul> </div>




[Menu item status]


The default statuses of the drop-down menu items are suspended (: hover) and focus (: focus)


.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus {  color: #262626;  text-decoration: none;  background-color: #f5f5f5;}


In addition to the preceding statuses, the drop-down menu items include the current status (. active) and disabled status (. disabled ). To use these two statuses, you only need to add the corresponding class name to the corresponding menu item.


<Div class = "dropdown"> <button class = "btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown" aria- haspopup = "true" aria-expanded = "true"> Dropdown <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation" class = "active"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "# "> drop-down menu item </a> </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href =" # "> drop-down menu item </a> </li> <li role = "presentation" class = "divider"> </li> <li role = "presentation" class = "disabled"> <a role = "menuitem" tabindex = "-1" href = "#"> drop-down menu item </a> </li> </ul> </div>




 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More