Membuat Menu dengan navbar

di dalam suatu aplikasi web, tentu saja menu adalah hal yang utama, menu adalah tempat dimana user dapat melakukan pilihan untuk apa yang ingin dilakukan, contoh menu pada website ini misalnya menu register, menu sign-in dan sign-out. Pada praktek ini akan dijelaskan penggunaan dari class yang telah disediakan oleh bootstrap dalam membuat menu

navbar

Langkah membuat file html dan css

  • Jalankan program Brackets, pilih menu open folder dan buka folder tempat anda bekerja
  • pilih menu File, new dan simpan dengan nama navbar.css
  • pilih menu File, new dan simpan dengan nama navbar.html
  • seperti langkah pada praktek sebelumnya buat dokumen html standard bootstrap dengan menggunakan emmet
  • beberapa kata kunci emmet:
    • ! (tanda seru)
    • meta:vp
    • link (arahkan ke 3 css, bootstrap, font-awesome, typography)
    • script:src (arahkan ke 2 file js yaitu jquery dan bootstrap)

Membuat navbar

  • ketik div.navbar.navbar-fixed-top.bg-warna tekan tab

    • class navbar adalah syarat untuk memasang navbar
    • navbar-fixed-top agar navbar ditempatkan di bagian paling atas.
    • bg-warna contoh menggunakan warna buatan sendiri
      • bg standard yang lain juga dapat digunakan misalnya bg-inverse, bg-danger, bg-success,...
  • ketik div.navbar-brand{Nama Brand}

    • navbar-brand kelas untuk judul website ditempatkan di sebelah kiri atas layar.
  • pada file css ketik css berikut:

.bg-warna1 {
  background-color: #E5fcc2;
  color: #547980;
}

teknik memilih tema warna dengan paintstrap.com

  • Agar siswa dapat memadukan warna dengan baik sangat disarankan untuk menggunakan kombinasi 2 website berikut:
  • langkahnya
    • buka web colourlovers.com, klik menu browse, palette
    • pilih salah satu tema warna
    • misalnya anda memperoleh link seperti ini http://www.colourlovers.com/palette/443995/i_demand_a_pancake
    • perhatikan angka 443995 pada link diatas, catat angka ini
    • buka web paintstrap.com
    • tema warna paintstrap dapat diambil dari adobe kuler dan colourlovers
    • klik pada pilihan colourlovers dan masukkan angka yang anda catat pada kotak yang tersedia

membuat menu

  • dibawah tag navbar-brand,
    • ketik ul.nav.navbar-nav.pull-sm-right
    • ketik (li.nav-item>a.nav-link{menu $})*3
    • cobalah mengganti nama setiap menu dan hyperlink nya (tidak harus klub sepak bola)

Membuat dropdown menu

  • hapus salah satu menu li yang dituliskan sebelumnya dan lakukan copy paste kode berikut:
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">SubMenu</a>
  <div class="dropdown-menu" aria-labelledby="Preview">
    <a class="dropdown-item" href="#">pilihan 1</a>
    <a class="dropdown-item" href="#">pilihan 2</a>
    <a class="dropdown-item" href="#">pilihan 3</a>
  </div>
</li>
  • Penjelasan

    • class dropdown, harus disertai dengan dropdown-toggle, dropdown-menu dan dropdown-item
    • Satu menu dropdown diwakili oleh 1 tag li
    • judul menu diwakili oleh tulisan dalam dropdown-toggle
    • menu yang ditampilkan masuk ke dalam div dengan class dropdown-menu
    • item-itemnya supaya bisa di klik menggunakan hyperlink dan harus menggunakan class dropdown-item
  • cobalah membuat sistem menu seperti contoh gambar berikut:

Membuat responsive

  • Agar menu yang kita buat bila dibuka menggunakan HP dapat secara otomatis mengecil
  • maka lakukan langkah berikut:
    • diatas baris navbar-brand, lakukan copy-paste kode berikut:
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
      &#9776;
    </button>
  • selanjutnya dibawah bagian navbar-brand, lakukan copy-paste kode berikut:
    <div class="collapse navbar-toggleable-xs" id="navbar-header">
  • jangan lupa untuk memberikan tag setelah tag

    • untuk melihat hasilnya anda dapat memperbesar dan memperkecil layar browser sehingga saat layar mencapai ukuran xs, maka secara otomatis menu akan hilang menjadi tanda 3 baris bar

Student Challenge

  • cobalah membuka index.html yang telah dibuat pada praktek 2
  • cobalah untuk membuat tampilan menu seperti gambar dibawah ini
  • jangan lupa sertakan pula faktor responsive apabila layar windows dikecilkan sampai dibawah 768 pixel