Membuat Menu Materialize CSS Framework Part 2

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.

15 Agustus 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat