Membuat Tabs Vertical & Horizontal hanya dengan CSS tanpa jQuery

Fitur tabs baik vertical maupun horizontal sangat berguna khususnya bagi anda yang mempunyai konten yang sangat padat. Dengan adanya tabs dalam suatu konten akan membantu merapikannya. Dalam artian, anda hanya menampilkan konten tertentu pada satu tab sebagai tampilan utama, sedangkan yang lainnya disembunyikan untuk meminimalisir space/ruang konten yang bisa berpengaruh pada tampilan layout yang bersih dan rapi.

Bagaimana cara membuat Responsive Tabs hanya menggunakan CSS?

Kali ini saya akan membantu untuk membuat tabs hanya menggunakan CSS dan tidak memerlukan bantuan Jquery untuk menerapkannya. Tabs tersebut menggunakan <input> + <label> dengan bantuan styling CSS yang tidak akan memberatkan server tentunya.

Demo

Download

Struktur HTML dan Style di bawah adalah salah satu contoh dari 8 Tabs yang murni hanya menggunakan CSS tanpa bantuan jQuery, yakni;

  • 4 Horizontal Tabs
  • 4 Vertical Tabs

Struktur HTML

Pertama kita harus membuat struktur HTMLnya untuk menentukan kerangka Tabsnya.

Pada judul masing-masing Tabs di atas, saya menggunakan nama kota, perlu diingat bahwa judul harus berada dalam <label>. Perlu diingat bahwa masing-masing value id pada <input> harus unik dan harus sama dengan value for pada <label> di bawahnya.

Adapun pada bagian konten, tidak lupa juga bahwa masing-masing id juga harus unik.

Styling CSS

Ok sekarang kita langsung permak struktur yang telah kita buat dengan CSS untuk mendesain bagian-bagian Tabs di atas.

Pada file download yang akan anda terima, setiap file HTML dari masing-masing desain saya bedakan, harap untuk menyimak secara menyeluruh. Anda tinggal mengaplikasikannya salah satu file HTMLnya untuk melihat hasilnya.

Pada file style.css, style masing-masing desain saya masukkan jadi satu dalam style.css, namun setiap style desainnya saya bedakan agar memudahkan anda untuk menemukan style masing-masing desain.

Leave a Reply

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