Belajar Materialize #15 : Membuat Navbar Materialize

Belajar Materialize #15 : Membuat Navbar Materialize – Halo semua “sahabat kodingin” berjumpa lagi pada seri panduan belajar materialize bahasa Indonesia.

Kali ini saya akan membahas tentang “bagaimana cara membuat navigasi bar pada materialize” tentunya dengan mudah dan cepat.

Sebelum membahas caranya, sekarang kita ketaui dulu “apa itu navbar” ?

Navbar adalah Kumpulan menu yang biasanya terletak pada bagian header, atas pada halaman sebagaian website.

Untuk membuat navbar tentunya anda perlu mengetahui sintaks-sintaks cara membuat navbar menggunakan tag HTML.

Yuk kita bahas.

Cara Membuat Navbar / Navigasi Bar pada Materialize

Untuk membuat navbar pada materialize menggunakan pembuka tag HTML <nav> dan penutup </nav> setelah itu di ikuti dengan class lainnya.

Materilize telah menyediakan banyak variasi untuk membuat halaman header navigasi bar pada halaman website.

Yuk kita cari tahu varian navbar pada materialize.

Membuat navbar di Kanan pada Materialize

Berikut ini contoh membuat navigasi bar berada di kanan

Dan Lihat Hasilnya.

Membuat navbar di Kanan pada Materialize
Membuat navbar di Kanan pada Materialize

Untuk membuat tampilan menu pada navigasi berada di kanan dapat menggunakan class .right

Membuat navbar di Kiri pada Materialize

Berikut ini contoh membuat navigasi bar berada di Kiri

Perhatikan kode diatas, terlihat jelas kita memberikan class .left pada bagian list menu dan memberikan class .left pada Logo. Maka dari itu menu terdapat di bagian sisi kiri dan Logo berada di sisi kanan.

Sekarang mari kita lihat hasilnya.

Membuat navbar di Kiri pada Materialize
Membuat navbar di Kiri pada Materialize

Membuat Navbar dengan Dropdown pada Materialize

Ada kalanya terdapat menu yang telalu banyak, sehingga kita bagi pada menu ke dalam sub menu. Nah itu lah satu satu penggunaan mernu dropdown.

Langsung saja kita membuat, contoh membuat navbar dengan dropdown.

Perhatikan kode di atas, terdapat class .dropdown-trigger sebagai penanda menu dropdown. Bukan hanya itu kita harus menginstance class tersebut pada Jquery.

Sekarang mari kita lihat hasiilnya.

Membuat Navbar dengan Dropdown pada Materialize
Membuat Navbar dengan Dropdown pada Materialize

Perhatikan gambar di atas, terdapat fitur menu dropdown yang dapat kita klik dan mengasilkan menu pada sub menu.

Oh iya, perlu diketahui Untuk membuat menu menjadi aktive kita dapat menggunakan nama class. active pada bagian list Tag HTML.

Kesimpulan…

Terdapat banyak variasi untuk membuat menu navbar pada materialize, anda dapat membuat menu di kiri, tengah maupun di kanan.

Selain itu anda dapat “membuat menu dropdown pada maerialize”, baik menggunakan Icon atau tidak.

Baca Juga…

Avatar
Didik
Saya Seorang Developer khususnya pada Bidang Website menggunakan Sistem Operasi Linux dan menyukai Pemrograman Website dan System Administrator. Selain itu saya pemilik website kodingin.com.

3 Comments

  1. Wih, ini nih ane belajar html puyeng bener, padahal cuma mau buat navigation bar aja. Akhirnya ngambil template gratisan aja dah buat tampilan blog ane, hehe.

    Oh ya, kalo mas suka sama blog yang membahas tentang ulasan video games bisa mampir ke blog ane ya 😀

  2. […] Belajar Materialize #15 : Membuat Navbar Materialize […]

  3. […] Belajar Materialize #15 : Membuat Navbar Materialize […]

Leave a Reply