Oleh / Web Design

Membuat CSS Responsive Tab Horizontal Touchable dan Scrollable

Cara membuat Responsive Tab Horizontal yang Touchable pada phone gadget dan scrollable pada desktop bisa dilakukan hanya dengan menggunakan trik CSS. Jika sebelumnya saya membuat Tutorial Tabs Vertical dan Horizontal tanpa jQuery yang mana saya menurunkan list-list pada tab tersebut pada ukuran width / lebar gadget tertentu, berbeda dengan tutorial sekarang ini. List-list dalam responsive tab horizontal ini akan tetap memanjang/meleber ketika berada dalam resolusi layar yang lebih kecil.

Misalnya, list-list dalam tab jika ditotalkan memiliki lebar 500px secara keseluruhan namun layar resolusi smartphone kita hanya 320px, maka list-list hanya akan terlihat sebagian (sekitar 320px terlihat, 500px – 320px = 180px tersembunyi/tidak terlihat). Maka fungsi scroll atau touch inilah yang akan kita pakai yang berfungsi agar bisa menggeser list-list yang terpotong atau tidak terlihat tersebut.

Kenapa CSS Responsive Tab Horizontal Touchable harus di Gunakan?

Tentunya hal ini tergantung pada 2 faktor:

  1. Ada terdapat list yang banyak, sehingga jika list tersebut di turunkan (display block) akan memakan space ke bawah. Dan tentunya hal ini sangat mengganggu user untuk melihat konten.
  2. Mempercantik desain tampilan sehingga user mengakses konten tidak terlalu sulit. Jika list tersebut di turunkan menggunakan display:inline-block atau inline saja, list akan terlihat berantakan tidak tersusun dengan rapi menginat panjang/lebarnya kata pada daftar nama list berbeda-beda.

Yang Harus dipersiapkan dalam Responsive Tab Horizontal Touchable

Kita akan menggunakan 1 elemen <div> dan elemen <ul> dan <li> untuk beberapa daftar list. Ok selanjutnya langsung kita buat struktur HTMLnya.

Struktur HTML dalam hal ini, anda bisa menggunakan elemen lainnya selain yang saya pakai, yakni <div> <ul> <li>. Bisa menggunakan <nav> <ul> <li>, <div> <div> <a> dan atau elemen-elemen lainnya berdasarkan elemen HTML.

Poin utama untuk membentuk Tab Horizontal Touchable ini adalah, dua elemen sebelum daftar list, yaitu <div> dan <ul>.

CSS Code Responsive Tab Horizontal Touchable:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *