Pada dasarnya, membuat menu di HTML menggunakan framework Bootstrap cukup dengan ul, li, dan class untuk navbar saja. Ketika berpikiran untuk membuat sebuah tab menu yang dapat berpindah-pindah dari tab A ke tab B dan seterusnya, perlu bantuan class lain yang sudah disiapkan oleh Bootstrap.
Gunakan class nav-tabs untuk membuat sebuah tab yang dapat bekerja menyerupai menu pada umumnya, bisa beralih dari menu satu ke menu lainnya.
Basic Tabs
Gunakan kodingan berikut untuk membuat sebuah tab dasar Bootstrap:
<h3>Basic Tab Bootstrap - Posciety</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
<br>
<p>Ini adalah contoh tab dasar, konten / isi dari masing-masing tab belum disesuaikan. Silahkan ikuti langkah-langkah berikutnya !</p>
Tampilannya akan tampil seperti ini:
Baca Juga:
Pada Basic Tabs ini hanya sekedar membuat tab saja, seperti yang terlihat pada kodingan di atas belum ada link di dalam href.
Strukutr kode di atas menentukan tab Home otomatis terbuka ketika halaman pertama kali di muat, untuk mengatur ini, kamu dapat mengganti posisi class=”active” pada tab yang ingin dibuka pertama secara default.
Basic Pills
Tidak hanya tabs, di Bootstrap juga bisa menggunakan Pills yang tidak berbeda jauh dengan Tabs. Tampilannya agak sedikit berbeda, tidak dikurung seperti benar-benar tabs. Begini contohnya:
Seperti Tabs, ketika Menu 1 dibuka maka akan menampilkan isi / konten dari Menu 1 dan tidak memerlukan loading (reload) halaman. Pada contoh ini menu Home adalah default aktif, jika ingin mengganti Menu 2 yang aktif secara default ketika pertama kali halaman dimuat, silahkan pindahkan class=”active” ke dalam barisan Menu 2.
<ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul>
Vertical Pills
Keuntungan menggunakan Piils adalah bisa membuatnya berdiri tegak / vertical, beberapa situs web menggunakan tampilan ini. Untuk membuat Vertical Pills cukup tambahkan class nav-stacked di akhir. Contoh:
<h3>Vertical Pills Bootstrap - Posciety</h3> <ul class="nav nav-pills nav-stacked"> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li class="active"><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul>
Maka tampilannya akan seperti ini:
Seperti yang terlihat pada gambar ini, menu / pills tersusun vertikal. Tapi, setiap barisnya habis oleh masing-masing menu. Biasanya, ketika membuat vertikal ini akan lebih bagus jika dibuat mengecil saja dan di sebelahnya adalah konten / isi dari masing-masing Piils. Untuk membuat seperti itu, atur saja lebar kolom menu Piils lebih kecil (misalnya col-md-3) dan buat isi / konten dari setiap menu tampil di sisi kanannya.
Dropdown Tabs / Pills
Tidak hanya polos seperti yang dicontohkan di atas, kamu dapat membuat Tabs / Piils dengan dropdown seperti navbar-navbar pada umumnya. Untuk membuat ini, tambahkan class dropdown sebagai pembungkus utama bagian menu yang ingin ditampilkan sebagai dropdown, berikan class dropdown-toggle pada menu utama, dan berikan class dropdown-menu pada submenu.
<h3>Tabs Dropwdown Bootstrap - Posciety</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
<li><a href="#">Submenu 1-4</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
Dicontohkan terdapat dropdown menu pada menu 1 yang berisi 3 sub menu, hasilnya seperti ini:
Kamu dapat menerapkan ini untuk Pills juga, gunakan class untuk dropdown dengan penempatan yang sama seperti di atas.
Dynamic Pills & Tabs
Seperti yang dijelaskan di atas, tabs dan pills memerlukan link di bagian href untuk mengarah ke konten / isi dari masing-masing menu. Tapi bisa juga diatur sebagai dinamis sehingga tidan memerlukan reload / muat ulang halaman ketika beralih dari tab menu satu ke tab menu lainnya.
<h2>Dynamic Tabs / Pills Bootstrap - Posciety</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
Untuk membuat menu dapat beralih tanpa reload (toggle) memerlukan class toggle di dalamnya, seperti yang terlihat pada kodingan di atas. Pada bagian href diganti dengan id dari setiap table konten yang sudah di buat di bagian bawahnya.
Pastikan kamu sudah menyesuaikan href id (#) dengan id yang sama pada konten yang ingin dilihat, jangan sampe salah agar tidak salah menampilkan konten.