Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat dalam Twitter Bootstrap 2?

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

Patricia Arquette
Patricia Arquetteasal
2024-11-22 00:50:10483semak imbas

How to Create a Multi-Level Dropdown Menu in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn