Cara Membuat Menu dengan Bootstrap

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 DEMO

Pertama kita buat rangka dari menu, dengan code html seperti ini:

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:

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.

Berikut adalah source code untuk menulis judul:

Kedua source code diatas harus dimasukkan diantara <div class=”navbar-header”></div>. Hasil dari soure code di atas adalah seperti ini:

Cara Membuat Menu dengan Bootstrap Ukuran Besar

Hasilnya dalam ukuran besar.

Cara Membuat Menu dengan Bootstrap Ukuran Kecil

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:

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.

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 - Cara Membuat Menu dengan Bootsrap

Menu Sudah Jadi Ukuran Penuh

Menu Sudah Jadi Ukuran Kecil - Cara Membuat Menu dengan Bootstrap

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:

Berikut ini adalah hasil dari source code di atas.

Dropdown Menu Ukuran Besar - Cara Membuat Menu dengan Bootstrap

Dropdown Menu Ukuran Besar

Dropdown Menu Ukuran Kecil - Cara Membuat Menu dengan Bootstrap

Dropdown Menu Ukuran Kecil

Penutup

Nah, demikianlah cara membuat menu dengan bootstrap. Sangat mudah sekali. Selamat belajar dan selamat mencoba. Semoga tulisan ini bermanfaat.