Membuat Menu Materialize CSS Framework Part 2

15/08/2016    Ekky Ridyanto    2121    Website

Kita lanjutkan kembali artikel yang sebelumnya. Sebelumnya kita sudah buat menunya nah masalahnya kita akan butuh menunya karena kita tidak mau total dihilangkan. Maka dari itu kita akan buat sistem hamburger menu. Cara buatnya sangatlah simple. Teman teman buat list menunya lagi jadi intinya menu yang pertama kita akan hilangkan pada versi mobile tapi kita akan tampilkan bagian menu yang kedua sebagai side-nav artinya navigasi yang muncul disamping.

dan kita berikan id dengan nama mobile-menu. id ini sangatlah penting karena nantinya kita akan sambungkan pada tag <a> yang kita buat. tag <a> ini sebagai icon hamburgernya dengan class sebagai berikut

dan attribute yang penting adalah data-activates. data-activates ini nilainya harus sama dengan idnya yakni mobile-menu yang akan dimunculkan dan untuk classnya button-collapse

satu lagi kita butuh jquerynya untuk menampilkan menunya. Kita panggil nama classnya button-collapse dan berikan metode sideNavnya

maka jika kita kecilkan layarnya kita bisa klik bagian hamburger menunya otomatis akan tampil menu sideNavnya dibagian samping kiri

jadi ibaratnya teman teman bisa membuat menu antara yang tampil didesktop dan yang tampil di mobile. Itu dia masih banyak lagi yang teman teman bisa lakukan dalam membuat menunya menjadi lebih menarik. Sampai jumpa pada artikel selanjutnya.

No data.