Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat dalam Twitter Bootstrap 2?

Menu Turun Berbilang Peringkat dalam Twitter Bootstrap 2

Ada kemungkinan untuk mencipta menu lungsur berbilang peringkat menggunakan elemen daripada Twitter Bootstrap 2, walaupun ciri ini tidak disokong secara asli .

Jawapan Kemas Kini (Bootstrap v2.1.1)

Bootstrap kini menyokong lungsur turun berbilang peringkat secara lalai dalam v2.1.1. Lembaran gaya yang dikemas kini menyediakan penggayaan untuk menu lungsur turun bersarang.

Jawapan Asal

Pada asalnya, Bootstrap tidak menyediakan sokongan submenu. Walau bagaimanapun, penyelesaian tersuai boleh dilaksanakan dengan memanfaatkan CSS dan 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

Tambah kelas .sub-menu kepada item menu lungsur bersarang:

<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>

Penyelesaian ini meletakkan menu lungsur bersarang di sebelah kanan item menu induk dan menambahkan anak panah untuk menunjukkan submenu yang boleh diklik.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat dalam Twitter Bootstrap 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!