10 Cuplikan Kode CSS & JavaScript untuk Membuat Navigasi Responsif

Salah satu bagian paling kompleks dari situs yang baik dan responsif adalah navigasi. Ini bisa memakan waktu cukup lama untuk diketahui, dan ada banyak tutorial untuk membantunya. Tapi saya juga penggemar menggunakan potongan kode seperti yang kami kumpulkan untuk artikel ini.

Semua cuplikan navigasi responsif ini gratis untuk diedit dan digandakan untuk proyek Anda sendiri. Mereka juga menampilkan berbagai gaya, jadi akan ada sesuatu di sini yang akan berfungsi untuk semua jenis situs web.

1. Tata Letak Halaman Penuh Responsif oleh Johnny Mango

Contoh responsif ini menunjukkan seberapa jauh Anda dapat mengambil fase pembuatan prototipe situs web. Anda akan melihat navigasi memiliki fitur menarik saat Anda mengarahkan kursor dan fokus otomatis pada tautan. Efek ini dapat diubah pada situs web "langsung" dengan navigasi yang sama, tetapi dalam contoh ini berguna untuk memamerkan UI/UX halaman.

Lihat Demo Navigasi Pena Responsif dengan Kube oleh Johnny Mango

2. Dropdown Navbar oleh Tania Rascia

Jika Anda memerlukan item dropdown yang lebih panjang di navigasi Anda, maka menu ini mungkin berfungsi lebih baik. Ini adalah alternatif yang kuat untuk navigasi yang lebih mendasar yang hanya menampilkan beberapa item menu. Dalam hal ini, Anda akan menemukan daftar tautan sederhana dengan dropdown yang sangat kecil. Tautan sub-menu hanya muncul pada acara klik yang ditangani oleh jQuery. Anda dapat mengubahnya menjadi CSS saja, tetapi Anda akan kehilangan pemicu klik.

Namun, untuk desain yang begitu bersih, saya terkejut dengan banyaknya fleksibilitas yang ditawarkan cuplikan ini kepada pengembang.

Lihat Bilah Navigasi Dropdown Pena Responsif oleh Tania Rascia

3. Tata Letak Satu Halaman oleh Jan Czizikow

Menu navigasi satu halaman membutuhkan cinta seperti yang lainnya. Ini adalah contoh sempurna dari navigasi satu halaman yang sedang beraksi. Tautan gulir ke bawah dengan animasi yang halus tetapi tidak membuat Anda menunggu terlalu lama.

Belum lagi, mereka secara otomatis mengubah ukuran agar pas terlepas dari ukuran browser Anda. Saya sebagian besar akan merekomendasikan jenis navigasi ini untuk halaman penjualan atau situs portofolio sederhana. Ini bersih dan menampilkan beberapa fitur animasi luar biasa di samping teknik responsif.

Lihat Pena Navigasi yang sepenuhnya responsif dengan animasi CSS dan jQuery oleh Jan Czizikow

4. Menu Dropdown Merah oleh Stephanie Walter

Pengembang Stephanie Walter telah membangun beberapa proyek menarik untuk web. Cuplikan ini hanyalah salah satu contoh yang menampilkan navigasi responsif berwarna merah cerah.

Tautan memiliki sedikit lebih banyak pizzazz dengan fitur yang dipilih khusus dan efek hover yang bagus untuk boot. Saat diubah ukurannya, Anda akan melihat navigasi menggunakan menu tarik-turun geser. Saya hampir akan memilih daftar tautan tingkat blok untuk seluler, tetapi ini berfungsi lebih baik mengingat sub-menu.

Lihat multilevel navigasi Pena Responsif oleh Stephanie Walter

5. Desain CSS Murni oleh Ahmad Hjazy

Berikut adalah desain unik menggunakan CSS murni untuk navigasi. Ini adalah menu vertikal dengan tautan navigasi yang meniru tabel periodik unsur.

Efek hover sedikit tertunda namun tidak diragukan lagi menarik. Belum lagi gaya responsif secara mengejutkan dapat digunakan. Mungkin bagian yang paling mengesankan adalah bagaimana seluruh contoh ini hanya menggunakan CSS .

Lihat Menu Navigasi Responsif Pena CSS oleh Ahmad Hjazy

6. Tajuk Lengket Responsif oleh Marc Libunao

Saya menyebutkan desain satu halaman dalam cuplikan sebelumnya, dan header responsif ini mengikuti lintasan yang serupa. Satu-satunya perbedaan adalah navigasi ini memiliki blok halaman yang sedikit lebih besar, dan menangani desain halaman responsif sedikit berbeda.

Saat Anda mengubah ukuran browser, Anda akan melihat bahwa contoh ini menggunakan ikon hamburger dengan animasi yang menyenangkan. Ini bagus mengingat gayanya, tetapi mungkin tidak semua orang.

Lihat navigasi header lengket Pena Responsif oleh MarcLibunao

7. Responsif & Ramah Sentuh oleh Dragoeco

Semua situs web yang bagus harus ramah sentuhan secara default, dan itulah yang membuat navigasi ini semakin menarik bagi para desainer.

Setiap tautan memang mengarah ke halaman baru, tetapi Anda dapat mengetuk untuk mengarahkan menu tarik-turun dengan mudah di perangkat berbasis sentuhan apa pun. Fitur ini sering hilang dari menu navigasi, dan itu salah satu alasan mengapa dropdown bisa rumit untuk dirancang.

Lihat Navigasi Tarik-Turun Pena: Responsif dan Ramah Sentuh oleh Dragoeco

8. Tautan Nav Sederhana oleh AnabolicHippo

Ketika saya memikirkan menu navigasi sederhana, saya memikirkan desain seperti ini. Setiap tautan muncul sebagai elemen bloknya sendiri, bahkan pada layar yang lebih kecil. Tidak ada menu hamburger dan tidak ada fitur menu animasi tersembunyi. Sebagai gantinya, tautan mengubah ukuran dan memecah menjadi garis terpisah.

Bagian tersulit adalah menangani efek dropdown pada perangkat seluler. Banyak tautan memiliki sub-menu, dan mereka akan bekerja dengan cara yang sama pada layar yang lebih kecil.

Saya berpendapat bahwa ini berfungsi paling baik untuk situs dengan sedikit atau tanpa sub-menu, tetapi patut dicoba di seluler untuk melihat apa pendapat Anda tentang pengalaman tersebut.

Lihat Menu Navigasi Pena Responsif oleh AnabolicHippo

9. Menu Tirai Playstation oleh Louis Chenais

Pengembang Louis Chenais membuat salah satu navigasi responsif favorit saya berdasarkan situs web PlayStation. Louis menyebutnya "menu tirai" di mana ia meluncur ke tampilan, menyalip seluruh halaman. Ini umum untuk antarmuka seluler, dan dengan cepat menjadi populer untuk desainer web juga.

Satu hal yang saya sangat suka adalah gaya animasi. Ini ramping dan cukup cepat untuk menampilkan tautan tanpa membuat pengguna bosan. Dan yang terbaik, ini terasa seperti itu bisa bekerja di situs web produksi.

Lihat Prinsip Navigasi Pena Responsif #3 – Menu Tirai oleh Louis Chenais

10. Mega-Menu Responsif oleh Samir Alley

Anda dapat mencari di web dan menemukan ratusan contoh menu navigasi mega. Ini biasanya muncul di blog dan situs web berita yang lebih besar, tetapi juga populer di toko eCommerce atau situs agensi besar. Bagian terberat dari mega-menu adalah membuatnya sepenuhnya responsif. Berkat cuplikan kecil ini, Anda dapat mengerjakan ulang desain menu mega agar sesuai dengan layar apa pun dengan mudah.

Di ponsel, ia menggunakan navigasi geser untuk menampilkan semua tautan internal dalam satu menu. Ini mungkin tampak sedikit mengganggu, tetapi Anda juga bisa menggunakan jQuery untuk menyembunyikan sub-tautan jika itu masuk akal. Ini masih salah satu solusi responsif terbaik yang pernah saya lihat untuk menjalankan menu mega di desktop tanpa mengasingkan pengguna seluler.

Lihat Menu Mega Responsif Pena – Navigasi melalui gang samir