Kali ini aku akan menunjukkan cara membuat menu dengan bootstrap. Bagi teman-teman yang belum tahu apa itu bootstrap, teman-teman bisa membaca artikelnya di sini. Tulisan ini bisa dibilang lanjutan dari artikel tersebut. Pada pembahasan kali ini, kita akan coba membuat sebuah menu navigasi dengan menggunakan bootstrap. Caranya sangat gampang.
LIHAT DEMOPertama kita buat rangka dari menu, dengan code html seperti ini:
|
1 2 3 4 5 |
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- isi dari menu --> </div> </nav> |
Isi dari menu yang akan kita buat terdiri dari 2 bagian, yaitu: header dan content
Membuat Header Menu – Cara Membuat Menu dengan Bootstrap
Header menu berisi judul dan tombol untuk membuka menu. Isi header harus dimasukkan diantara source berikut:
|
1 2 3 |
<div class="navbar-header"> <!-- Isi menu ada di sini --> </div> |
Berikut ini adalah source code untuk membuat tombol membuka menu. Tombol ini hanya akan muncul ketika ukuran browser mengecil. Ketika browser kita mengecil, maka menu-menu tersembunyi. Tombol ini berfungsi untuk menampilkan menu yang tersembunyi tersebut.
|
1 2 3 4 5 6 |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> |
Berikut adalah source code untuk menulis judul:
|
1 |
<a class="navbar-brand" href="http://www.rahmanu.com">Rahmanu.com</a> |
Kedua source code diatas harus dimasukkan diantara <div class=”navbar-header”></div>. Hasil dari soure code di atas adalah seperti ini:
Hasilnya dalam ukuran besar.
Hasilnya ketika browser mengecil
Membuat Isi Menu – Cara Membuat Menu dengan Bootstrap
Sekarang kita akan melanjutkan untuk mengisi menu. Isi dari menu berada diantara source-code berikut:
|
1 2 3 |
<div id="navbar" class="navbar-collapse collapse"> <!-- Isi menu ada di sini --> </div> |
Isi menu berupa unordered list ( <ul></ul> ), jadi item-itemnya adalah <li></li>. Pada contoh ini kita membuat 1 buah ul, akan tetapi teman-teman bisa menambah ul jika ingin lebih. Berikut ini contoh menu.
|
1 2 3 4 5 6 7 8 |
<ul class="nav navbar-nav"> <li class="active"><a href="#">Demo</a></li> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="http://www.rahmanu.com/">Kembali ke Blog</a></li> <li><a href="http://www.rahmanu.com/">Kembali ke Blog Artikel</a></li> <li><a href="http://www.rahmanu.com/nama-saya-ardhan-wahyu-rahmanu/">Tetang Ardhan</a></li> </ul> |
class=”active” pada <li> digunakan untuk memandakan bahwa halaman tersebut terpilih. Gampangannya seh untuk membedakan dengan yang lain. Berikut ini adalah hasil dari menu yang dibuat dengan source code di atas.
Menu Sudah Jadi Ukuran Penuh
Menu Sudah Jadi Ukuran Kecil
Membuat Drop Down Menu
Bagaimana jika kita ingin menu yang muncul ketika tombol di tekan. Ternyata caranya sangat mudah. Kita bisa menambahkan <ul> lagi diantara item <li> yang ingin dijadikan drop down menu. Dan kita juga harus menambahkan class=”dropdown” pada <li> yang dijadikan sebagai drowdown. Berikut ini contohnya:
|
1 2 3 4 5 6 7 8 9 10 11 |
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Menu<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Judul Menu</li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> </ul> </li> |
Berikut ini adalah hasil dari source code di atas.
Dropdown Menu Ukuran Besar
Dropdown Menu Ukuran Kecil
Penutup
Nah, demikianlah cara membuat menu dengan bootstrap. Sangat mudah sekali. Selamat belajar dan selamat mencoba. Semoga tulisan ini bermanfaat.