Beispiel für ein mehrstufiges Dropdown-Menü von Bootstrap 3-js-Tutorial-php.cn

Beispiel für ein mehrstufiges Dropdown-Menü von Bootstrap 3

PHPz

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

Original

2069 Leute haben es durchsucht

Obwohl Bootstrap gut ist, gibt es für komplexe Schnittstellen immer noch viele Komponenten, die Sie selbst erweitern müssen, und es erfordert einige Mühe, sich auf die einfache und elegante Bootstrap-Schnittstelle zu verlassen. Lassen Sie uns ein mehrstufiges Bootstrap-3-Dropdown-Menü freigeben. Es ist kein Js-Skript eines Drittanbieters erforderlich. Es kann direkt nach dem Kopieren verwendet werden.

[Verwandte Videoempfehlungen: 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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Verwenden von CSS3 für Schritte zum Implementieren des animierten Dropdown-Menüeffekts implementieren

JS zum Anzeigen und Ausblenden des Dropdown-Menüs

JQuery-Implementierung des Drops -Down-Menüfunktion Beispielcode

Das obige ist der detaillierte Inhalt vonBeispiel für ein mehrstufiges Dropdown-Menü von Bootstrap 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!