8 Cuplikan CSS & JavaScript yang Meningkatkan Menu Hamburger

Menu hamburger telah menjadi identik dengan aplikasi seluler dan situs web. Ini menyembunyikan item navigasi dengan rapi sampai pengguna membutuhkannya. Mereka bagus untuk menghemat ruang saat layar real estat terbatas.

Dan kami juga melihat mereka lebih banyak digunakan di perangkat desktop. Ini masuk akal untuk menu dan skenario yang besar dan rumit di mana konten harus menjadi fokus utama. Ya, hamburger ada di mana-mana akhir-akhir ini.

Terlebih lagi, jenis navigasi ini sangat fleksibel. Berbagai animasi dan tata letak pengungkapan dimungkinkan, dan itu hanya menggores permukaan. Desainer terus-menerus mendefinisikan ulang apa yang terjadi di balik ikon kecil ini.

Mari kita lihat 8 cuplikan CSS dan JavaScript yang menyempurnakan menu hamburger. Anda mungkin terkejut dengan kemampuan mereka.

Hamburger Animasi CSS oleh Eric Porter

Mari kita mulai dengan sesuatu yang sederhana namun penting: interaction terbuka dan tertutup. Cuplikan ini menampilkan serangkaian animasi klik/sentuh. Tujuannya adalah untuk membuat pengalaman pengguna menjadi intuitif. Setiap animasi di sini melakukannya dengan sangat efektif.

Lihat Pena Hamburger – Animasi CSS oleh Eric Porter

Interaction Tombol Menu oleh Aybüke Ceylan

Di sini kami memiliki cuplikan yang memberikan putaran unik pada tampilan ikon hamburger. Garis offset pertama dan ketiga menonjol sambil menjaga semuanya tetap dapat dikenali. Ada lebih banyak barang di dalamnya. Mengklik ikon mengungkapkan menu menarik yang muncul dari kiri atas. Nuansanya sangat mirip dengan menu konteks yang sering terlihat di sistem operasi.

Lihat Pena Interaction Tombol Menu oleh Aybüke Ceylan

Mengubah Menu Hamburger dengan CSS oleh LM Gonzalves

Buka menu ini dan lihatlah transisi CSS yang luar biasa. Garis-garis ikon hamburger tampak berubah menjadi item menu individual. Ini pasti akan menarik perhatian pengguna (belum lagi membuat beberapa desainer web kagum).

Lihat Pena Mengubah Menu Hamburger dengan CSS oleh lmgonzalves

Konsep Menu Lain oleh Rune Sejer Hoffmann

Pengungkapan menu ini adalah contoh bagus lain dari transisi CSS. Dalam hal ini, menu menjadi overlay dengan tata letak horizontal. Tipografinya tepat, seperti juga efek hover yang manis.

Lihat Pena Konsep menu lainnya oleh Rune Sejer Hoffmann

Beralih & Menu Nav Animasi oleh A. James Liptak

Menu overlay ini memiliki sentuhan unik. Ini menggunakan panel warna-warni, menempatkan navigasi itu sendiri di tengah layar. Di sebelah kiri, area pencitraan merek bertukar latar belakang tetapi tetap di tempat yang konsisten. Tidak hanya terlihat keren, tetapi juga membuat pengguna tetap sadar akan merek situs. Itu sesuatu yang sering hilang saat mengimplementasikan overlay.

Lihat Pena Beralih &Menu Nav Animasi oleh A. James Liptak

Menu Lebar Penuh & Animasi SVG oleh Brandon Ward

Jika Anda ingin menambahkan percikan kesenangan ke proyek Anda, Anda dapat melihat cuplikan ini. Kombinasi warna cerah, transisi halus, dan efek hover membuat menu ini menarik perhatian.

Lihat Pena Menu lebar penuh & animasi SVG oleh Brandon Ward

Beralih Bilah Sisi CSS oleh Silvastar Bistrovic

Sepertinya sebagian besar menu overlay di luar sana cenderung buram. Itu sebabnya contoh ini adalah perubahan kecepatan yang bagus. Mengklik ikon hamburger akan menampilkan menu cantik yang menggunakan latar belakang gradien transparan. Ini memungkinkan Anda untuk melihat sebagian situs di bawahnya sambil tetap dapat dengan mudah menavigasi ke halaman lain.

Lihat Pena Pengalih bilah sisi CSS oleh Silvestar Bistrović

Menu Navigasi Geser Keluar oleh Praveen Bisht

Kami telah melihat menu hamburger yang mengambil alih seluruh layar. Tapi bagaimana dengan menu yang hanya berkembang menjadi bilah navigasi tradisional? Cuplikan slide-out ini melakukannya dengan cara yang sangat bersih dan halus. Ada sesuatu yang bisa dikatakan untuk fitur yang hanya berfungsi tanpa mempermasalahkannya. Perlu diketahui bahwa yang satu ini mungkin perlu sedikit kerja ekstra untuk membuatnya sepenuhnya responsif.

Lihat Pena Menu Navigasi Geser Keluar oleh Praveen Bisht

Hamburger yang Terus Berkembang

Menu hamburger telah berkembang jauh sejak awal. Tidak lagi terbatas pada drop-down sederhana, ia dapat memanfaatkan sepenuhnya yang terbaru yang ditawarkan CSS dan JavaScript. Dan meskipun mungkin tidak tepat untuk setiap proyek, utilitasnya terus bertambah.

Kami berharap contoh-contoh ini telah menginspirasi Anda untuk mengambil menu hamburger lebih jauh! Jika Anda ingin melihat potongan yang lebih enak, silakan lihat kami Koleksi CodePen.

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
Select your currency
Scroll to Top