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

Mencipta Menu Jatuh Turun Berbilang Peringkat dengan Twitter Bootstrap 2

Twitter Bootstrap 2 menyediakan set komponen yang mantap, tetapi menu lungsur turun berbilang peringkat tidak disokong secara asli . Isu ini telah menimbulkan kebimbangan dalam komuniti GitHub, menyebabkan ramai pembangun mencari penyelesaian alternatif.

Untuk menangani had ini, kod CSS berikut boleh dilaksanakan:

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

Dengan menambahkan CSS ini pada aplikasi anda, anda boleh mencipta kelas .sub-menu tersuai yang membolehkan anda melanjutkan lungsur turun standard untuk memasukkan tahap tambahan. Kedudukan dan keterlihatan submenu boleh dikawal melalui CSS.

Penyelesaian ini dicipta sebelum versi Bootstrap 3, yang memperkenalkan sokongan asli untuk lungsur turun berbilang peringkat. Jika anda menggunakan Bootstrap versi 2, penyelesaian ini sesuai untuk mencapai fungsi yang serupa. Walau bagaimanapun, untuk Bootstrap versi 3 dan lebih baru, penggunaan penyelesaian ini tidak lagi diperlukan.

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