suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für ein mehrstufiges Dropdown-Menü von Bootstrap 3

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

PHPz
PHPzOriginal
2017-12-07 16:03:072068Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die neuesten Fragen und Lösungen für Javascript-ProgrammiererinterviewsNächster Artikel：Die neuesten Fragen und Lösungen für Javascript-Programmiererinterviews

In Verbindung stehende Artikel

Mehr sehen