如何在 Twitter Bootstrap 2 中建立多層下拉式選單？-css教學-PHP中文網

如何在 Twitter Bootstrap 2 中建立多層下拉式選單？

Patricia Arquette

發布： 2024-11-22 00:50:10

原創

318 人瀏覽過

How to Create a Multi-Level Dropdown Menu in Twitter Bootstrap 2?

Twitter Bootstrap 2 中的多層下拉式選單

可以使用Twitter Bootstrap 2 中的元素建立多層下拉式選單，即使本機不支援此功能.

更新答案（Bootstrap v2.1.1)

Bootstrap 現在在 v2.1.1 中預設支援多層下拉式選單。更新後的樣式表提供了巢狀下拉選單的樣式。

原始答案

最初，Bootstrap 不提供子選單支援。但是，可以透過利用 CSS 和 HTML 來實現自訂解決方案。

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

登入後複製

HTML

新增巢狀選單的 .sub-menu類別items:

<ul class="dropdown-menu">
  <li>Item 1</li>
  <li class="sub-menu">
    <a href="#">Item 2</a>
    <ul class="dropdown-menu">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

登入後複製

此解決方案將巢狀下拉選單放置在父選單項目的右側，並新增一個箭頭來指示可點選的子選單。

以上是如何在 Twitter Bootstrap 2 中建立多層下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！