Belajar Materialize #18 : Sidebar Navigasi pada Materialize

Belajar Materialize #18 : Sidebar Navigasi pada Materialize – halo “sahabat kodingin” selamat datang di tutorial belajar materialize menggunakan bahasa Indonesia. Kali ini kita akan melanjutkan seri tutorial dari sebelumnya kita bikin.

Kali ini akan membahas Tutorial mengenai :

Sidebar Navigasi pada Materialize

Pasti anda tidak asing dengan kata sidebar, di dalam halaman website sidebar teretak di samping di antara konten, baik di kanan maupun di kiri. Semua itu tergantung developersnya yang membuat.

Sedangkan navigasi adaalah arah untuk merubah posisi dari sebelumnya ke dalam hal yang telah kita tentukan tampilannya.

Jadi…

Apa itu Sidebar Navigasi ?

Sidebar navigasi merupakan sebuah layout yang berada di kiri maupun kanan dan jika di klik akan memunculkan menu yang kita ingin tampilkan.

Contoh implementasi sidenav terdapat pada aplikasi mobile , seperti aplikasi chat telegram. Dimana jika di klik suatu ikon maka akan muncul menu selanjutnya.

Sudah paham apa itu Sidebar Navigasi atau sering yang di sebut sidenav ?

Biar lebih jelas langsung saja kita buat contoh navigasi sidebarnya….

Membuat Sidenav / Sidebar Navigasi pada Materialize

Perlu di ketahui sidenav salah satu komponen pada materialize. sidenav tidak hanya menggunakan style css, melainkan menggunakan batuan javascript, baik native maupun dengan Jquery.

ketika kita menggunakan sidenav secara otomatis kita juga di buatkan headernya, Untuk membuat elemen header dengan menambahkan tag html <nav></nav>.

Berikut ini contoh menggunakan sidenav pada materialize.

Perhatikan kode di atas, terdapat elemen HTML yaitu nav, nav digunakan untuk memberikan judul website anda, dimana nav berada di bagian header.

Untuk membuat layout navigasi dapat mendefinisikan class, biasanya dengan nama .sidenav, tapi bukan hanya itu saja, class tersebut harus di proses dengan Jquery agar berjalan sesuai yang kita harapkan.

Contoh di atas menggunakan icon materialize sebagai tombol untuk menampilkan layout navigasi sidebar yang ingin di tampilkan.

Sekarang, mari kita lihat hasilnya.

Membuat Sidenav / Sidebar Navigasi pada Materialize
Membuat Sidenav / Sidebar Navigasi pada Materialize

Perhatikan gambar di atas, ketika kita mengklik icon maka akan muncul sebuah sidebar yang telah kita buat.

Perlu di ketahui kita juga bisa menambahkan gambar profil maupun gambar sebagai latar balakang gambar utama.

Terlihat sangat keren fitur materialize yang satu ini.

Method pada Sidebar Materialize

Selanjutnya kita bahas method yang bisa digunakan untuk sidebar navigasi, seperti pada modal, kita dapat menggunakan pengaturan sidebar navigasi, misalnya mengatur animasi nya atau hal lainnya.

Format nya dengan mengidentifikasi nama method dan di ikuti nilainya.

Berikut ini method yang ada pada sidenav materialize.

Method pada Sidebar Materialize
Method pada Sidebar Materialize

Berikut ini contoh potonhan kode penggunaan method materialize.

Contoh di atas saya mengubah nilai durasi untuk menampilkan elemen layout sidebar manejadi 100.

Anda juga bisa mengubah sesuai yang anda inginkan dan memasukan method lebih dari satu.

Kesimpulan…

Fitur Sidenav pada materialize sangat keren digunakan , cocok untuk kebutuhan website jaman sekarang. Cara kerja sidenav yaitu dengan memunculkan sidebar melalui tombol link.

Kita juga dapat memberikan gambar dan latar belakang agar tampilannya lebih menarik lagi.

Penggunaan method pada sidenav materialize dapat di lakukan sesuai kebutuhan kita.

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.

4 Comments

  1. […] Belajar Materialize #18 : Sidebar Navigasi pada Materialize […]

  2. […] Belajar Materialize #18 : Sidebar Navigasi pada Materialize […]

  3. […] Belajar Materialize #18 : Sidebar Navigasi pada Materialize […]

  4. […] Belajar Materialize #18 : Sidebar Navigasi pada Materialize […]

Leave a Reply