Cara Membuat Multi Level Menu Bootstrap

Halo, jumpa lagi dengan saya , Pada kesempatan baik ini saya akan kasih tutorial tentang bagaimana Cara Membuat Multi Level Menu Bootstrap, pada dasar nya membuat multi level menu dengan bootstrap memang cukup mudah tapi tentu kita harus sedikit merombak sedikit dari CSS nya, tapi jangan khawatir buat kalian yang masih bingung cara merombak nya, berikut akan saya jelaskan langkah-langkah nya.

Seperti biasa, pertama-tama kita akan membuat struktur multi level menu 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="#">Menu level 2 </a>
		        <ul class="dropdown-menu sub-menu">
		            <li><a href="#">Menu 2</a></li>
		            <li><a href="#">Menu 2</a></li>
		            <li><a href="#">Menu 2</a></li>
		        </ul>
		    </li>
		  </ul>
		</li>
	</ul>
</div>

Pada kode diatas saya sudah menambahkan beberapa class untuk nanti kita custom di CSS nya. Setelah itu kita lanjutkan untuk sedikit merombak CSS pada 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 sudah kode diatas diketikan, silahkan simpan terlebih dahulu kemudian jalankan pada browser masing-masing dan lihat hasil nya.

Bagaimana, cukup mudah bukan ? Baiklah sampai disini tutorial mengenai bagaimana Cara Membuat Multi Level Menu Bootstrap, semoga bermanfaat, amin.

Selamat mencoba

The post Cara Membuat Multi Level Menu Bootstrap appeared first on Kursus Website Terbaik.