Wie kann ich Bootstrap-Dropdown-Untermenüs in Bootstrap 3, 4 und 5 implementieren?-CSS-Tutorial-php.cn

Wie kann ich Bootstrap-Dropdown-Untermenüs in Bootstrap 3, 4 und 5 implementieren?

Linda Hamilton

Freigeben： 2024-12-27 07:54:09

Original

785 Leute haben es durchsucht

How Can I Implement Bootstrap Dropdown Submenus in Bootstrap 3, 4, and 5?

Fehlendes Bootstrap-Dropdown-Untermenü

Bootstrap 3 hat die Dropdown-Untermenüklasse in RC entfernt, da Untermenüs nicht mehr häufig verwendet werden, insbesondere auf Mobilgeräten Geräte. Es gibt jedoch mehrere Methoden, um die Untermenüfunktionalität mithilfe von CSS oder JavaScript wiederherzustellen.

Bootstrap 5 (2023 Update)

Methode 1: JavaScript Toggle

Um zu verhindern, dass das Untermenü geschlossen wird, wenn das übergeordnete Dropdown-Menü geöffnet ist öffnen:

let dropdowns = document.querySelectorAll('.dropdown-toggle');
dropdowns.forEach((dd) => {
  dd.addEventListener('click', function (e) {
    var el = this.nextElementSibling;
    el.style.display = el.style.display === 'block' ? 'none' : 'block';
  });
});

Nach dem Login kopieren

Methode 2: Nur CSS-Menü-Hover

Für Navigationsleisten-Dropdowns:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

Nach dem Login kopieren

Bootstrap 4 (2018 Update)

Sie können die gleiche Funktionalität mit implementieren CSS:

Navbar-Untermenü bei Hover

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
}

Nach dem Login kopieren

Bootstrap 3

Ein Beispiel für die Verwendung von Bootstrap 3:

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 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: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

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

Nach dem Login kopieren

HTML-Beispiel

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="menu-item dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="menu-item dropdown dropdown-submenu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
              <ul class="dropdown-menu">
                <li class="menu-item ">
                  <a href="#">Link 1</a>
                </li>
                <li class="menu-item dropdown dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link 3</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich Bootstrap-Dropdown-Untermenüs in Bootstrap 3, 4 und 5 implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!