Bagaimanakah Saya Boleh Mencipta Menu Jatuh Turun Berbilang Peringkat dengan Twitter Bootstrap 2?

Melaksanakan Dropdown Berbilang Peringkat dengan Twitter Bootstrap 2

Twitter Bootstrap 2 secara asalnya tidak mempunyai keupayaan untuk mencipta menu dropdown berbilang peringkat. Untuk mengatasi had ini, pembangun telah mencipta penyelesaian kreatif menggunakan CSS dan elemen HTML tambahan.

Penyelesaian CSS Tersuai

Satu pendekatan melibatkan penambahan CSS tersuai untuk menentukan penampilan dan tingkah laku daripada sub-menu:

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

CSS ini meletakkan sub-menu bersebelahan dengan menu induknya item dan mengira dimensi dan kedudukannya dengan sewajarnya.

Nota: Pendekatan ini telah ditamatkan dalam Bootstrap 3 dan tidak lagi diperlukan dalam versi kemudian.

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