Pelajaran 3 - Responsive Dropdown Button (Hamburger Menu) untuk Website/Apps Pwa
Linkman Pwa - Sun 16/May/2021 10:15pm [Last Comment]
Linkman Pwa - Sun 16/May/2021 10:15pm [Last Comment]
Salam Hari Raya Aidilfitri 2021 semua..
Kalau dah khatam pelajaran 1 & 2 haritu, kini tibalah masa utk membuat responsive navigation menu dalam bentuk dropdown (bila klik butang keluar menu). Menu ini nampak cantik di kesemua media.. iaitu di desktop, laptop, tablet dan smartphone.
Dalam istilah web development.. butang ini biasa dipanggil 'hamburger menu' sebab icon yg biasa digunakan adalah 3 garis sederet yg menyamai bentuk hamburger.
Jika anda nak search google atau youtube berkenaan bab ini, masukkan perkataan 'hamburger html css menu' atau 'hamburger button' dan akan keluar result yg relevan.
Wikipedia: Hamburger Button
https://en.wikipedia.org/wiki/Hamburger_button
Ada beratus2 cara untuk membuat hamburger menu. Ada yg menggunakan ketiga2 teknologi iaitu html5, css3 dan javascript. Tetapi ada yg menggunakan html dan css sahaja TANPA javascript.
Di bahagian comment saya akan masukkan satu persatu tutorial yg saya cuba..
Niche: Web Design Malaysia | Diskusi Bisnes
Kalau dah khatam pelajaran 1 & 2 haritu, kini tibalah masa utk membuat responsive navigation menu dalam bentuk dropdown (bila klik butang keluar menu). Menu ini nampak cantik di kesemua media.. iaitu di desktop, laptop, tablet dan smartphone.
Dalam istilah web development.. butang ini biasa dipanggil 'hamburger menu' sebab icon yg biasa digunakan adalah 3 garis sederet yg menyamai bentuk hamburger.
Jika anda nak search google atau youtube berkenaan bab ini, masukkan perkataan 'hamburger html css menu' atau 'hamburger button' dan akan keluar result yg relevan.
Wikipedia: Hamburger Button
https://en.wikipedia.org/wiki/Hamburger_button
Ada beratus2 cara untuk membuat hamburger menu. Ada yg menggunakan ketiga2 teknologi iaitu html5, css3 dan javascript. Tetapi ada yg menggunakan html dan css sahaja TANPA javascript.
Di bahagian comment saya akan masukkan satu persatu tutorial yg saya cuba..
Niche: Web Design Malaysia | Diskusi Bisnes
1. Linkman - Sun 16/May/2021, 10:21pm
Tutorial yg pertama saya cuba adalah dari w3schools. Kesemua nampak ok cuma saya kurang suka sebab menggunakan javascript.
How to make Responsive Top Navigation
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Saya akan teruskan mencari hamburger button/menu yg lain.
Tutorial yg pertama saya cuba adalah dari w3schools. Kesemua nampak ok cuma saya kurang suka sebab menggunakan javascript.
How to make Responsive Top Navigation
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Saya akan teruskan mencari hamburger button/menu yg lain.
2. Linkman Pwa - Mon 17/May/2021, 6:50pm
Hamburger menu kedua yg saya akan cuba adalah dari foolishdeveloper.com
Responsive Top Navigation Menu Bar Using HTML & CSS
https://www.foolishdeveloper.com/2021/05/responsive-top-navigation-menu-bar.html
nampak menarik kerana menu nya cantik di android, smartphone, laptop dan hanya menggunakan html5 dan css3. Tidak ada komponen javascript
Hamburger menu kedua yg saya akan cuba adalah dari foolishdeveloper.com
Responsive Top Navigation Menu Bar Using HTML & CSS
https://www.foolishdeveloper.com/2021/05/responsive-top-navigation-menu-bar.html
nampak menarik kerana menu nya cantik di android, smartphone, laptop dan hanya menggunakan html5 dan css3. Tidak ada komponen javascript
3. Linkman Pwa - Wed 19/May/2021, 6:11pm
Yang ini dipanggil 'IBM Menu'
dari segi fungsi amat menarik. cuma masalahnya kena ada jquery..
https://blog.stackfindover.com/how-to-create-a-responsive-top-navigation-menu/
Yang ini dipanggil 'IBM Menu'
dari segi fungsi amat menarik. cuma masalahnya kena ada jquery..
https://blog.stackfindover.com/how-to-create-a-responsive-top-navigation-menu/
4. Linkman Pwa - Sun 23/May/2021, 9:50am
ok saya dah test beberapa puluh navbar.. rasanya saya pilih yg comment no 1 diatas (w3schools punya). walaupun bukan paling cantik.. tapi yg paling simple dan senang nak modify..
ok saya dah test beberapa puluh navbar.. rasanya saya pilih yg comment no 1 diatas (w3schools punya). walaupun bukan paling cantik.. tapi yg paling simple dan senang nak modify..
5. Linkman Pwa - Sun 23/May/2021, 9:26pm
untuk rekod, kalau nak diikutkan dari segi fungsi dan rupa.. mungkin saya lagi suka yg dibawah ni (github fixed-nav) .. tapi bila saya lihat codenya melibatkan agak banyak files.. saya tak jadi pilih yg ni..
Fixed Responsive Nav
https://github.com/adtile/fixed-nav
untuk rekod, kalau nak diikutkan dari segi fungsi dan rupa.. mungkin saya lagi suka yg dibawah ni (github fixed-nav) .. tapi bila saya lihat codenya melibatkan agak banyak files.. saya tak jadi pilih yg ni..
Fixed Responsive Nav
https://github.com/adtile/fixed-nav
Untuk animasi icon hamburger 3 lapis tu pulak.. saya mungkin akan pilih yg ni:
Codestackr - Animated Hamburger Menu Tutorial - CSS Effects
https://youtu.be/dIyVTjJAkLw
Boleh download code disini:
https://github.com/codeSTACKr/hamburger-animation
Page 1 (Total 6 comments)