Pembahasan kali ini akan mengenai cara membuat nav tab menggunakan bootstrap dengan mudah,
sebenarnya nav tab/menu tab dapat dibuat tanpa harus menggunakan
bootstrap juga dapat dilakukan, hal itu tergantung pada teman-teman
sekalian yang
ingin menggunakannya. Namun disini akan menggunakan
bootstrap dikarenakan bootstrap adalah salah satu framework css yang
terpopuler dibeberapa tahun ini.
Setelah beberapa waktu lalu saya membuat tutorial MEMBUAT HEADER MENU NAVIGATION MENGGUNAKAN BOOTSTRAP,
saat ini akan melaju untuk membuat nav tab menggunakan bootstrap.
adapun yang harus teman-teman miliki/siapkan seperti biasanya yaitu file
bootstrap.
Dalam struktur penulisan kode HTML akan terlihat seperti dibawah ini, teman-teman dapat mencoba secara langsung dengan mengikuti
kode-kode yang ada.
<!DOCTYPE html> <html> <head> <title>Bootstrap Nav Tab</title> <!-- Bootstrap Css --> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <!-- mulai container --> <div class="container"> <h1>Membuat Nav Tab Menggunakan Bootstrap</h1> <ul class="nav nav-tabs"> <li class="active"><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> <li><a data-toggle="tab" href="#menu4" >Menu 4</a></li> </ul> <!-- mulai isi konten --> <div class="tab-content"> <div id="menu1" class="tab-pane fade in active"> <h3>Menu 1</h3> <p>ini menu satu ya</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>ini menu dua ya</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>ini menu tiga ya</p> </div> <div id="menu4" class="tab-pane fade"> <h3>Menu 4</h3> <p>ini menu empat ya</p> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
Perhatikan pada kode dibawah ini
<li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
data-toggledisini digunakan untuk memanggil menu tab aagar dapat berfungsi ketika diklik. Demikian pula pada tag
<a href>dengan attribut #menu1 hal ini digunakan untuk memanggil isi dari konten dari tab. Pada sestiap tab memiliki attribut yang berbeda beda. Penerapan untuk menngunakan akan tampak seperti dibawah ini.
<div id="menu1" class="tab-pane fade in active"> <h3>Menu 1</h3> <p>ini menu satu ya</p> </div>
Hasil dari struktur kode diatas akan menjadi seperti dibawah ini.
Selamat untuk mencoba dan bereksperiman buat teman-teman semoga berhasil dan bermanfaat.
Cara Mudah Membuat Nav Tab Menggunakan Bootstrap
Reviewed by creativekiller
on
January 11, 2018
Rating:
Reviewed by creativekiller
on
January 11, 2018
Rating:
No comments: