CSS Eksperimen - 04-1 informasi tab

Informasi Tab
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

Pendahuluan
Banyak cara untuk menampilkan informasi. Salah satu caranya adalah
dengan mengelompokkan berdasarkan kategori.
Dalam materi ini, akan dijelaskan cara pembuatan tab yang bisa
digunakan untuk menampilkan informasi berdasarkan kelompok
tertentu.

HTML
<div class="tabs">
<ul class="tab-links">
<li class="active">
<a href=”#tab1”>Tab 1</a>
</li>
<li><a href=”#tab2”>Tab 2</a></li>
<li><a href=”#tab3”>Tab 3</a></li>
</ul>
...
</div>
CSS
Implementasi Tab
Seperti biasa, Kita akan buat kerangkanya terlebih dahulu.
Pertama Kita buat tab untuk navigasi antar kontennya. (Titik-titik akan
diisi dengan konten)

HTML
<div class="tab-content">
<div id="tab1" class="active">
<p>Contoh Konten 1</p>
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
</div>
</div>
CSS
Implementasi Tab
Berikutnya, Kita buat tab konten yang merupakan penampung konten
dari tab yang dipilih untuk ditampilkan. Sisipkan kode ini pada tanda
titik-titik di kode sebelumnya sebagai container konten.

Implementasi Tab
Hasil sementara akan tampak seperti gambar berikut.
→ Masih belum ad style apapun. Navigasi masih berupa list biasa
seperti pada gambar dan container div yang berjejer ke bawah.

CSS
/* ======== Tabs ========*/
.tabs {
width: 100%;
display: inline-block;
}
/* ======== Tab Links ======== */
/* ======== Clearfix ======== */
.tab-links{
margin: 0; padding: 0;
}
.tab-links:after {
display: block;
clear: both;
content: “”;
}
Implementasi Tab - 1
Berikutnya Kita beri style pada
Tabnya.
Berikan juga clearfix untuk
mereset CSS.

CSS
.tab-links li {
margin: 0px 5px;
float: left;
list-style: none;
}
.tab-links a {
padding: 9px 15px;
display: inline-block;
background: #d0d0d0;
font-size: 16px;
font-weight: 600;
color: #4c4c4c;
transition: all linear 0.15s;
text-decoration: none;
}
Pada style ini membuat elemen
list yang merupakan navigasi
antar tab berjejer ke kanan dalam
1 baris.
Nantinya konten akan diberikan
style supaya hanya muncul satu
saja yaitu yang terpilih,
sedangkan yang lainnya
disembunyikan.

CSS
.tab-links li {
margin: 0px 5px;
float: left;
list-style: none;
}
.tab-links a:hover {
background: #0BB364;
color: white;
}
li.active a, li.active a:hover {
background: #fff;
color: #4c4c4c;
}
Pada style ini membuat elemen
list yang merupakan navigasi
antar tab berjejer ke kanan dalam
1 baris.
Nantinya konten akan diberikan
style supaya hanya muncul satu
saja yaitu yang terpilih,
sedangkan yang lainnya
disembunyikan.

Implementasi Tab
→ Tab navigasi sudah berbentuk seperti button yang siap diklik. Akan
tetapi konten masih ditampilkan berjajar ke bawah. Warna background
sengaja diubah.

CSS
/* ======== Content Tabs ========*/
.tab-content {
padding: 15px;
box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
background: #fff;
}
.tab {
display: none;
}
.tab .active {
display: block;
}
Pada style ini, kita mengatur cara
menampilkan container yang
menampung isi suatu tab.
Kelas tab digunakan untuk
menyembunyikan.
Sedangkan tab active digunakan
untuk menampilkan kontennya.
Kedua kelas ini digunakan dalam
javascript untuk interaksi.

Implementasi Tab
→ Keseluruhan tab sudah terbentuk dan siap ditambahkan javascript
untuk interaksinya.

Javascript
$(document).ready(function() {
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = $(this).attr('href');
// Sembunyikan / Tampilkan Tabs
$('.tabs' + currentAttrValue).show().siblings().hide();
// Ubah / Hilangkan Tab terpilih menjadi “active”
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
Ketika tab diklik, jquery akan membaca klik tersebut. jquery akan mengambil
atribut href yang terpilih dan menampilkan tab kontennya ke depan, dan
menyembunyikan elemen siblingsnya. Lalu tab yang terpilih akan diberi class
active dan menghilangkan class active dari siblingsnya.

Javascript
$(document).ready(function() {
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = $(this).attr('href');
// Sembunyikan / Tampilkan Tabs
$('.tabs' + currentAttrValue).show().siblings().hide();
// Ubah / Hilangkan Tab terpilih menjadi “active”
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
Pada akhir script ditemukan e.preventDefault. Hal ini disediakan untuk
mencegah kelakuan dari anchor text untuk berpindah ke halaman lain. Jadi
akan diinterupsi oleh script dan hanya terjadi pindah tabs tanpa ada pindah
halaman. Anda boleh memakai atribut lain selain “href” (lebih baik, HTML5).

Finalisasi
Setelah tab menu navigasi selesai dibuat, Anda bisa mengubah dan
menyesuaikannya sesuai dengan selera Anda.
Contoh dapat dilihat pada Codepen Kuliahkita

CSS Eksperimen - 04-1 informasi tab

More Related Content

What's hot

More from KuliahKita

Recently uploaded

CSS Eksperimen - 04-1 informasi tab