PENGGUNAAN HORIZONTAL SCROLL MENU PADA WEBSITE PRIVATE COURSE

Dari tugas yang diberikan, terlihat dibawah ini, untuk bagian tampilkan data yang akan di create oleh admin, data akan ditampilkan dalam bentuk card dan bersifat dynamic, artinya card tersebut dapat di scroll secara horizontal.

Menu dengan horizontal scroll adalah jenis menu yang dirancang untuk menampilkan sejumlah item menu horizontal yang lebih besar dari lebar tampilan layar saat item-menu tersebut tidak dapat semua ditampilkan secara bersamaan. Oleh karena itu, pengguna harus menggulir menu horizontal ke kanan atau kiri untuk melihat seluruh item-menu yang ada. Horizontal scroll menu sering digunakan saat Anda memiliki banyak item-menu dalam navigasi dan ingin menjaga tampilan yang terorganisir tanpa membuat tampilan yang sangat panjang.

Menambahkan Gaya CSS untuk Horizontal Scroll:

Anda perlu menambahkan gaya CSS untuk mengaktifkan horizontal scrolling pada menu. Berikut adalah contoh CSS yang dapat Anda gunakan:

Horizontal scroll menu adalah solusi yang berguna ketika Anda ingin menjaga navigasi yang kaya konten dan tetap responsif tanpa harus mengorbankan pengalaman pengguna dengan memuat semua item-menu dalam satu tampilan. Namun, perlu diingat bahwa implementasi yang baik dan tata letak yang baik sangat penting agar menu tersebut mudah digunakan oleh pengguna.

Subscribe

Related articles

Tips Kolaborasi Efektif antara UI/UX Desainer dan Pengembang

Kerja sama yang solid antara UI/UX desainer dan pengembang...

Aturan Penting yang Harus Dipatuhi oleh Seorang UI/UX Designer

Desain Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX) adalah...

Membangun Profil LinkedIn yang Mengesankan untuk UI/UX Designer

Dalam era digital yang semakin maju, LinkedIn telah menjadi...

Meningkatkan Karir Anda dengan Sertifikasi Google UX

Dalam dunia yang semakin terhubung secara digital, pengalaman pengguna...

Perjalanan Seorang Intern UI/UX Desainer di Udacoding

Sebagai seorang mahasiswa yang bersemangat dan bercita-cita tinggi di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here