Bootstrap 3 multi-level drop-down menu example-JS Tutorial-php.cn

Bootstrap 3 multi-level drop-down menu example

PHPz

Release： 2018-10-15 16:32:33

Original

2071 people have browsed it

Bootstrap is good, but for complex interfaces, there are still many components that need to be expanded by yourself, and it takes some effort to rely on the simple and elegant Bootstrap interface. Let’s share a Bootstrap 3 multi-level drop-down menu. No third-party Js script is needed. It can be used directly after copying.

【Related video recommendation: Bootstrap tutorial】

<!DOCTYPE HTML> 
<html lang="zh-CN"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Bootstrap 3 的多级下拉菜单示例</title> 
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
  <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/> 
  <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
  <style type="text/css"> 
    .dropdown-submenu { 
      position: relative; 
    } 
    .dropdown-submenu > .dropdown-menu { 
      top: 0; 
      left: 100%; 
      margin-top: -6px; 
      margin-left: -1px; 
      -webkit-border-radius: 0 6px 6px 6px; 
      -moz-border-radius: 0 6px 6px; 
      border-radius: 0 6px 6px 6px; 
    } 
    .dropdown-submenu:hover > .dropdown-menu { 
      display: block; 
    } 
    .dropdown-submenu > a:after { 
      display: block; 
      content: " "; 
      float: right; 
      width: 0; 
      height: 0; 
      border-color: transparent; 
      border-style: solid; 
      border-width: 5px 0 5px 5px; 
      border-left-color: #ccc; 
      margin-top: 5px; 
      margin-right: -10px; 
    } 
    .dropdown-submenu:hover > a:after { 
      border-left-color: #fff; 
    } 
    .dropdown-submenu.pull-left { 
      float: none; 
    } 
    .dropdown-submenu.pull-left > .dropdown-menu { 
      left: -100%; 
      margin-left: 10px; 
      -webkit-border-radius: 6px 0 6px 6px; 
      -moz-border-radius: 6px 0 6px 6px; 
      border-radius: 6px 0 6px 6px; 
    } 
  </style> 
</head> 
<body> 
<p class="container"> 
  <p class="row"> 
    <h2>Bootstrap 3多级下拉菜单</h2> 
    <hr> 
    <p class="dropdown"> 
      <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" 
        href="javascript:;"> 
        下拉多级菜单 <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
        <li><a href="javascript:;">一级菜单</a></li> 
        <li><a href="javascript:;">一级菜单</a></li> 
        <li class="pider"></li> 
        <li class="dropdown-submenu"> 
          <a tabindex="-1" href="javascript:;">一级菜单</a> 
          <ul class="dropdown-menu"> 
            <li><a tabindex="-1" href="javascript:;">二级菜单</a></li> 
            <li class="pider"></li> 
            <li class="dropdown-submenu"> 
              <a href="javascript:;">二级菜单</a> 
              <ul class="dropdown-menu"> 
                <li><a href="javascript:;">三级菜单</a></li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </p> 
  </p> 
</p> 
</body> 
</html>

Copy after login

Related recommendation:

Use css3 to implement animated drop-down Steps to implement the menu effect

JS implements the display and hiding of the drop-down menu

JQuery implements the function example code of the drop-down menu

The above is the detailed content of Bootstrap 3 multi-level drop-down menu example. For more information, please follow other related articles on the PHP Chinese website!