Drop-down menu in bootstrap

Drop-down menu (basic usage)

Small partners Note that the drop- down menu component in the bootstrap framework is a standalone component, depending on the version, which corresponds to the file:

? Less version: the corresponding source file is dropdowns.less

? Sass version: The corresponding source file is _dropdowns.scss

? Compiled bootstrap version: View bootstrap.css file line No. 3004 ~ line No. 3130

When you use the drop-down menu for the bootstrap framework, you must call the Bootstrap.js file provided by the bootstrap framework. Of course, if you are using an unpublished version, you can find a file named "Dropdown.js" in the JS folder. You can also call this JS file. In our tutorial, however, we uniformly call the compressed "bootstrap.min.js" file:

<script src= "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" ></script>

Special statement: Because Bootstrap's component interaction is dependent on the plugin written by the jquery library, it is important to load the jquery.min.js before using bootstrap.min.js to make an effect.

Let's take a look at the official website for a simple example:

<div class= "dropdown" ><buttondropdown-toggledata-toggle= "dropdown " > Drop-down menu <span class= "Caret" ></span></button><ul class= "dropdown-menu "role=" menu "aria-labelledby=" dropdownMenu1 ">   <li role=" presentation "><a role=" MenuItem " tabindex= "-1" href= "#" > Drop-down menu items </a></li>   ...   <li role= "Presentation" class= "divider" ></li>   <li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu item </a></li></ul></div>

How to use:

When using the drop-down menu component in the bootstrap framework, it is very important that the structure is used correctly, if the structure and the class name are not used correctly, which directly affects whether the component can be used properly. Let's take a quick look at:

1. Use a container called "dropdown" to wrap the entire drop-down menu element, in the example:

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

2, using a <button> button As the parent menu, and define the class name "dropdown-toggle" and the Custom "data-toggle" property, And the value must be the same as the Outer container class name, this example is:

data-toggle="dropdown"

3, drop-down menu items use a ul list, and define a class named "Dropdown-menu", this example is:

<ul class="dropdown-menu">

A drop-down menu component in the bootstrap framework, whose drop-down menu item is hidden by default,

Because "Dropdown-menu" default Style Set "Display:none", its detailed source please see Bootstrap.css file line No. 3010 ~ line No. 3029:

. dropdown-menu {  position:absolute;/* sets absolute positioning, relative to the parent element div.dropdown*/  top:100%;/* Let the drop-down menu item at the bottom of the parent menu item, if the parent element does not set relative positioning, The element is relative to the BODY element */  left:0;  z-index:1000;/* let the drop-down menu item not be obscured by other elements */  display:none;/* default Hidden drop-down menu item */  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,.);  border-radius:4px;  -webkit-box-shadow:0 6px 12px rgba (0, 0, 0,. 175);  box-shadow:0 6px 12px rgba (0, 0, 0,. 175);}

When the user clicks on the parent menu item, the drop-down menu will be displayed:

When the user taps again, the drop-down menu continues to hide:

Principle Analysis:

Now let us analyze the implementation of the principle, very simple, through the JS technology, to the parent container "Div.dropdown" to add or remove the class name "open" to control the drop-down menu to show or hide. That is, by default, "Div.dropdown" does not have the class name "open", and when the user first clicks, "Div.dropdown" adds the class name "open", and when the user taps again, the class name "open" in the "Div.dropdown" container will be removed again. We can view the entire process through the firebug of the browser:

Default condition:

The first time the user clicks:

The user clicks again:

On line No. 3076 ~ No. 3078 of the Bootstrap.css file, we can easily discover:

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

Drop-down menu (drop-down divider)

The drop-down menu in the bootstrap framework also provides a drop-down divider, assuming that the drop-down menu has two groups, then the group can add a drop-down divider to the group by adding an empty <li>, and adding the class name "divider" to the <li>. The corresponding style code:

/* Source Bootstrap.css file line No. 3034 ~ No. 3039 Line */

. Dropdown-menu. Divider {height:1px;margin:9px 0;Overflow:hidden;background-color: #e5e5e5;}

Drop-down menu (menu title)

In the previous section, you can group the drop-down menu by adding "divider" to make the grouping more visible, and you can add a header (title) to each group. As follows:

class= "Dropdown-header" class= "Dropdown-header"> Part Two menu head </li>...<li role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Drop-down menu items </a></li></ul></div>

The corresponding styles are as follows:

/* View Bootstrap.css file line No. 3090 ~ No. 3096 Line */

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

Drop-down menu (alignment)

To implement the right alignment method:

The bootstrap Frame drop-down menu is left-aligned by default, and you can add a "pull-right" or "Dropdown-menu-right" on "Dropdown-menu" If you want the drop-down menu to be right-aligned relative to the parent container The class name, as follows:

<div class= "dropdown" >  <button class= "btn btn-default dropdown-toggle" type= "button" id= "DropdownMenu1" data-toggle= "dropdown" > Drop-  down menu  <span class= "caret" ></span>  </button>   Pull-right"role=" menu "aria-labelledby=" dropdownMenu1 ">   ...  </ul></div>

The "Pull-right" class in the above code can be replaced with "Dropdown-menu-right", two classes are the same, can be seen from the following source code.

Implementation principle:

The corresponding styles are as follows:

/* Source Please view Bootstrap.css file line No. 3030 ~ No. 3033 Line and line 3082 ~ No. 3085 Line * *

. dropdown-menu.pull-right {  right:0;  Left:auto;}. dropdown-menu-right {  right:0;  Left:auto;}

Also be sure to add CSS styles for. Dropdown. float:left

. dropdown{  Float:left;}

Drop-down menu (menu item status)

The default state of a drop-down menu item (without setting) has a suspended state (: hover) and Focus State (: Focus):

/* View Bootstrap.css file line No. 3049 ~ No. 3054 Line */

. dropdown-menu > li > A:hover,.dropdown-menu > li > A:focus {  color: #262626;  Text-decoration:none;  Background-color: #f5f5f5;}

The drop-down menu item has the current state (. Active) and disabled state (. Disabled) In addition to the above two states. These two state usage methods only need to add the corresponding class name on the corresponding menu item:

<div class= "dropdown" >  <button class= "btn btn-default dropdown-toggle" type= "button" id= "DropdownMenu1" data-toggle= "dropdown" > Drop-  down menu  <span class= "caret" ></span>  </button>  <ul class= "Dropdown-menu" role= "menu" aria-labelledby= "dropdownMenu1" >    class= "active"><a role= " MenuItem "tabindex="-1 "href=" # "> Drop-down menu items </a></li>    ...    class=" disabled "><a role = "MenuItem" tabindex= "-1" href= "#" > Drop-down menu items </a></li>  </ul></div>

The corresponding style code is also very simple:

/* Please view Bootstrap.css file line No. 3055 ~ line No. 3075 * *

. dropdown-menu >. active > A,.dropdown-menu >. active > A:hover,.dropdown-menu >. active > A:focus {
   
    color: #fff;  Text-decoration:none;  Background-color: #428bca;  outline:0;}. Dropdown-menu > Disabled > A,.dropdown-menu >. disabled > A:hover,.dropdown-menu >. Disabled > A:focus {  color: #999;}. Dropdown-menu > Disabled > A:hover,.dropdown-menu >. disabled > A:focus {  text-decoration:none;  cursor:not-allowed;  background-color:transparent;  Background-image:none;  Filter:progid:DXImageTransform.Microsoft.gradient (enabled = False);}
   

Drop-down menu in bootstrap