Bagaimana untuk Membuat Menu Jatuh Turun Berbilang Peringkat dalam Twitter Bootstrap?

Menu Turun Berbilang Peringkat dengan Twitter Bootstrap

Twitter Bootstrap 2 tidak mempunyai ciri menu lungsur berbilang peringkat. Walau bagaimanapun, terdapat penyelesaian yang boleh dilaksanakan untuk mencapai Funktionalität ini.

Jawapan Asal (Bootstrap Versi 3)

Dalam Bootstrap versi 3 dan ke atas, menu lungsur turun berbilang peringkat disokong secara lalai. Rujuk biola berikut untuk contoh:

http://jsfiddle.net/2Smgv/2858/

Jawapan Asal (Bootstrap Versi 2)

Untuk versi Bootstrap yang lebih lama, berikut ialah penggodaman CSS yang boleh dilakukan digunakan:

/* CSS code for sub-menu customization */
.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 mencipta kelas ".sub-menu" baharu untuk mengendalikan menu lungsur turun 2 peringkat, meletakkannya di sebelah item menu dan mengubah suai anak panah untuk muncul di sebelah kiri kumpulan submenu.

Demo

Anda boleh melihat demo penyelesaian ini di sini: [Pautan Demo]

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