Cara Simpel Membuat Multi Level Bootstrap 4

06/02/2020    Risman Hakim    211     Website

Cara Simpel Membuat Multi Level Bootstrap 4 - Pada pembahasan artikel dumetschool kali ini saya akan melanjutkan dari tutorial sebelumnya yaitu Cara Membuat Dropdown Hover Bootstrap 4, dimana menu dropdown nya akan ditambahkan levelnya, jadi nantinya menu akan menampilkan sub - submenu. Caranya cukup simpel sekali, buat kalian yang ingin mencoba membuat multi level bootstrap bisa mengikuti langkah - langkahnya berikut ini.

Jika kalian pernah mengikuti tutorial sebelumnya, kalian tinggal hanya menambahkan beberapa baris program saja, atau jika baru mulai bisa kalian mengetikan sintak - sintaknya dibawah.

Silahkan kalian bisa buka file bootstrapnya, kemudian kalian bisa ketikan sintak HTML berikut.  

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- Dropdown -->
            <div class="dropdown">
                  <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Multi Level Dropdown
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">HTML 5</a></li>
                    <li><a class="dropdown-item" href="#">PHP</a></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item" href="#">CSS</a>
                        <ul class="dropdown-menu dropdown-1">
                            <li><a class="dropdown-item" href="#">SASS</a></li>
                            <li><a class="dropdown-item" href="#">SCSS</a></li>
                            <li class="dropdown-submenu">
                            <a class="dropdown-item" href="#">Framework</a>
                                <ul class="dropdown-menu">
                                  <li><a class="dropdown-item" href="#">Bootstrap</a></li>
                                  <li><a class="dropdown-item" href="#">Materialize</a></li>
                                </ul>
                              </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

dari sintak diatas, kita bisa melihat ada attribute class yang ditambahkan pada elemen list yaitu menambahkan class dropdown-submenu dan list submenu nya yaitu dropdown-menu.

<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Framework</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Bootstrap</a></li>
      <li><a class="dropdown-item" href="#">Materialize</a></li>
    </ul>
</li>

kalian juga bisa menambahkan beberap submenu seperti diatas jika ingin lebih banyak list menunya.

Setelah, menambahkan sintak HTML seperti diatas, langkah selanjutnya adalah tambahkan style CSS agar ketika di hover akan secara otomatis submenu tampil. Silahkan kalian bisa ketika sintak CSSnya berikut ini.

<style type="text/css">
    .container {
        margin-top: 30px;
    }
    .dropdown-toggle,
    .dropdown-menu {
        border-radius: 0px !important;
    }
    .dropdown-item:hover {
        color: white;
        background-color: #dc3545;
    }
    .btn-danger {
        width: 55%;
    }
    .dropdown:hover>.dropdown-menu,
    .dropdown-submenu:hover>.dropdown-menu {
      display: block;
    }
    .dropdown-1 {
        left: 158px !important;
        top: 70px;
    }
</style>

Setelah semua sintak diatas telah diketikan, silahkan simpan filenya lalu kalia bisa membuka pada browser masing - masing. Maka tampilan multi level menu akan terlihat seperti gambar dibawah ini.

Cara Simpel Membuat Multi Level Bootstrap 4

Baik, itulah cara simpel untuk membuat multi level menu dengan bootstrap 4. Semoga bermanfaat dan selamat mencoba

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More