Cara Membuat Multi Level Menu Bootstrap

Halo, jumpa lagi dengan saya 🙂 , Di kesempatan bagus ini saya akan kasih panduan mengenai bagaimana Cara Merancang Multi Level Fitur Bootstrap, di mendasar nya merancang multi level fitur dengan bootstrap memang lumayan gampang tapi tentu kita mesti sedikit merombak sedikit dari CSS nya, tapi jangan khawatir bikin kalian yang masih bingung cara merombak nya, berikut akan saya jelaskan strategi nya.

Seperti lazimnya, pertama-tama kita akan merancang struktur multi level fitur nya dengan kode yang telah di sediakan bootstrap berikut ini.

<div class=container>
<ul class=nav nav-pills>
<li class=dropdown>
  <a href=# data-toggle=dropdown class=dropdown-toggle>Dropdown </a>
  <ul class=dropdown-menu id=menu1>
    <li><a href=#>Another action</a></li>
    <li><a href=#>Something else here</a></li>
    <li>
        <a href=#>Fitur level 2 </a>
        <ul class=dropdown-menu sub-menu>
            <li><a href=#>Fitur 2</a></li>
            <li><a href=#>Fitur 2</a></li>
            <li><a href=#>Fitur 2</a></li>
        </ul>
    </li>
  </ul>
</li>
</ul>
</div>

Di kode diatas saya telah menambahkan beberapa class bagi nanti kita kembangkan di CSS nya. Setelah itu kita lanjutkan bagi sedikit merombak CSS di bootstrap seperti berikut.

.container {
    width: 400px;
    margin: auto;
}
.nav-pills > li > a {
    background: #009688;
    color: white;
    margin-top: 30px;
}
.nav-pills > li > a:hover {
    color: #009688;
}
.dropdown-menu .sub-menu {
    left: 100%;
    margin-top: -1px;
    position: absolute;
    top: 51px;
    visibility: hidden;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    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;
}

Nah, kalo telah kode diatas diketikan, silahkan simpan terlebih dahulu kemudian jalankan di browser masing-masing dan lihat hasil nya.

Bagaimana, lumayan gampang bukan ? Baiklah hingga disini panduan mengenai bagaimana Cara Merancang Multi Level Fitur Bootstrap, semoga bermanfaat, amin.

Selamat mencoba 🙂

Sumber https://kursuswebsite.org