Bootstrap every day must learn to pull the menu _javascript skill

One, Drop-down menu (Basic usage)

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

☑less version: The corresponding source file is dropdowns.less

☑sass version: The corresponding source file is _dropdowns.sass

☑ compiled bootstrap version: View bootstrap.css file line No. 3004 ~ No. 3130

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

Copy Code code as follows:

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

Special statement: because Bootstrap component interaction effect is dependent on the jquery library to write Plug-ins, so before using bootstrap.min.js must be loaded before the effect of jquery.min.js.

Let's look at a simple example of the official web:

<div class= "dropdown" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "DropdownMenu1" data-toggle= "dropdown" >
pull-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 item </a></li>
 ...
 <li role= "Presentation" class= "divider" ></li> <li role= "presentation" ><a role= "
 MenuItem" tabindex= "-1" href= "#" > Dropdown menu item </a></li>
</ul>
</div>

How to use:

When using the Pull-down menu component in the bootstrap frame, the correctness of its structure is very important, if the structure and class name are not used correctly, directly affect whether the component can be used properly. Let's take a quick look at:

1. Use a container named "dropdown" to wrap the entire Drop-down menu element, as in the example:

2. Use 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 most outer container class name:

Data-toggle= "Dropdown"

3. The Drop-down menu item uses an UL list and defines a class named "Dropdown-menu", this example is:

<ul class= "Dropdown-menu" >

Example

<! DOCTYPE html>  

Two, drop down menu (principle analysis)

The Drop-down menu component in the bootstrap frame is hidden by default, as follows:

Because the "Dropdown-menu" Default Style Set "Display:none", its detailed source check bootstrap.css file line No. 3010 ~ 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 Pull-down menu item not be covered by other elements * *

 display:none;/* default hidden drop-down menus

 /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 and the Drop-down menu will continue to be hidden when the user clicks again.

Principle Analysis:

Now we analyze the implementation principle, very simple, through the JS technical means, to the parent container "Div.dropdown" Add or Remove class name "open" to control the Drop-down menu to show or hide. In other words, 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 the class name "open" in the "Div.dropdown" container when the user clicks again. will be removed again. We can view the entire process through the browser's Firebug:

Default condition:

The first time users click:

User clicks again:

In the Bootstrap.css file line No. 3076 ~ No. 3078, we can easily find:

. Open > Dropdown-menu {
 display:block
}

Drop-down Menu (dropdown divider line)

The Drop-down menu in the bootstrap frame also provides a drop-down divider, assuming that the Drop-down menu has two groups, and that the group can be added to the group by adding an empty <li>, and adding the "divider" of the class name to this <li> to implement the ability to add a drop-down divider. The corresponding style code:

/source Bootstrap.css file No. 3034 line ~ No. 3039 Line/

. Dropdown-menu. Divider {
 height:1px;
 MARGIN:9PX 0;
 Overflow:hidden;
 Background-color: #e5e5e5;
}

Example:

<! DOCTYPE html>  

The effect is as follows:

Four, Drop-down menu (menu title)

The previous section explains that you can group Drop-down menus by adding "divider," so that you can add a header (caption) to each group to make the group more visible. As follows:

Copy Code code as follows:

<li role= "Presentation" class= "Dropdown-header" > The first part menu head </li>

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;
}

Example

<div class= "dropdown" > <button class= "btn btn-default dropdown-toggle" type= "button" id= "DropdownMenu1" data-toggle= "dropdown" > Food <span class= "caret" ></span> </button> <ul class= "Dropdown-menu" ro
 Le= "Menu" aria-labelledby= "dropdownMenu1" > <li role= "Presentation" class= "Dropdown-header" > Vegetables </li> <li role= "Presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Celery </a></li> <li role= " Presentation "><a role=" MenuItem "tabindex="-1 "href=" # "> Radish </a></li> <li role=" Presentation " ><a role= "MenuItem" tabindex= "-1" href= "#" > Eggplant </a></li> <li role= "presentation" class= " Divider "></li> <li role=" presentation "class=" Dropdown-header "> Staple food </li> <li role=" Presentation "><a role=" MenuItem "tabindex="-1 "href=" # "> Rice </a></li> <li role=" Presentation " ><a role= "MenuItem" tabindex= "-1" href= "#" > Steamed bun </a></li> <lI role= "presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" > Noodles </a></li> </ul> </ 

 Div>

The operation effect is as follows:

Five, Drop-down menu (alignment)

To implement the right alignment method:

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

Copy Code code as follows:

<ul class= "Dropdown-menu pull-right" role= "menu" aria-labelledby= "dropdownMenu1" >

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

Implementation principle:

The corresponding styles are as follows:

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

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

Also, be sure to add a float:leftcss style to. Dropdown.

. dropdown{
 float:left;
}

The results of the operation are as follows:

The Drop-down menu is aligned to the left of the parent container:

At the same time, there is a class name just the opposite of "Dropdown-menu-right" class name "Dropdown-menu-left", the effect is to let the Drop-down menu and the parent container to the left of the alignment, in fact, is the default effect.

/Please view Bootstrap.css file line No. 3086 ~ No. 3089 Line/

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

The Drop-down menu (menu item status)

The default state (without setting) of the Drop-down menu item has a suspended state (: hover) and focus state (: Focusing):

/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 the disabled state (. Disabled), in addition to the above two states. The two states use the method only to add the corresponding class name to the corresponding menu item:

<div class= "dropdown" >
 <button class= "btn btn-default dropdown-toggle" type= "button" id= "DropdownMenu1" data-toggle= "dropdown" >
 pull-down menu
 <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 items </a></li> ...
 <li role=" Presentation "class=" disabled "><a role=" MenuItem "tabindex="-1 "href=" # "> Drop-down menu Items </a></li>
 </ul>
</div>

The operation effect is as follows:

The corresponding style code is also very simple:

/Please view Bootstrap.css file line No. 3055 ~ 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);

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

The above is the entire content of this article, I hope to help you learn.