Home >Web Front-end >JS Tutorial >Implementation of drop-down menu under Bootstrap framework (code example)

Implementation of drop-down menu under Bootstrap framework (code example)

不言
不言forward
2018-10-15 16:52:356599browse

The content this article brings to you is about the implementation of drop-down menus under the Bootstrap framework (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Context menus or hidden/show menu items are often needed when interacting with web pages. Bootstrap provides a switchable, contextual menu by default for displaying a link list. Moreover, the menu display in various interactive states needs to be used in conjunction with the javascript plug-in. This article will introduce the Bootstrap drop-down menu in detail (free course recommendation: bootstrap tutorial)

Usage method

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

because Bootstrap's component interaction effects all depend on A plug-in written by the jQuery library, so jquery.js must be loaded before using bootstrap.js to produce the effect

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Basic usage

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

1. Use a name The "dropdown" container wraps the entire drop-down menu element

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

2. Use a

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

3. Use of drop-down menu items A ul list, and define 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>

Implementation of drop-down menu under Bootstrap framework (code example)

4. By setting the .dropup class for the parent element of the drop-down menu, you can make the menu pop up (the default is to pop up downward)

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

Implementation of drop-down menu under Bootstrap framework (code example)

Principle Analysis

Drop-down menu component in the Bootstrap framework , its drop-down menu items are hidden by default because the default style of "dropdown-menu" is set to "display:none"; when the user clicks the parent menu item, the drop-down menu will be displayed; when the user clicks again, the drop-down menu Will continue to hide

.dropdown-menu {
  position: absolute;/*设置绝对定位,相对于父元素p.dropdown*/
  top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/
  left: 0;
  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
  display: none;/*默认隐藏下拉菜单项*/
  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);
}

[Implementation principle]

 1. When the Dropdown plug-in is loading the web page, all files with data-toggle= "dropdown" style elements for event binding

 2. When the user clicks a link or button with data-toggle="dropdown" style, the javascript event code is triggered

 3. javascript The event code adds an .open style to the parent container

4. The .dropdown-menu menu that is hidden by default can be displayed after it has an .open style externally, thereby achieving the expected effect

 5. When the user clicks again, the class name "open" in the "p.dropdown" container will be removed again

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

[Other usages 】

Another interesting usage is that the trigger element can be placed outside the parent container of the menu

However, there are two points to note in this usage

1. To set the id value of the parent container

2. To set the data-toggle attribute and data-target attribute of the trigger element, the data-target attribute value is #id

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" data-target="#dropdown1">外部触发器</button>
<div class="dropdown" id="dropdown1">
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">HTML</a></li>
        <li role="presentation"><a href="##">CSS</a></li>
        <li role="presentation"><a href="##">javascript</a></li>
    </ul>
</div>

Implementation of drop-down menu under Bootstrap framework (code example)

Extension usage

[Separator]

In the Bootstrap framework The drop-down menu provides a drop-down separator line. Assuming that the drop-down menu has two groups, the group can be added by adding an empty

  • and adding the class name "pider" to this
  • Function of drop-down divider

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

    <li role="separator" class="pider"></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>

    Implementation of drop-down menu under Bootstrap framework (code example)

    【Menu Title】

    You can add a title to any drop-down menu to indicate a group of actions

    <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 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">第一部分菜单头部</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
      </ul>
    </div>

    Implementation of drop-down menu under Bootstrap framework (code example)

    【对齐方式】

    Bootstrap框架中下拉菜单默认是左对齐,如果想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名 

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

    由于

  • The above is the detailed content of Implementation of drop-down menu under Bootstrap framework (code example). For more information, please follow other related articles on the PHP Chinese website!

    Statement:
    This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete