Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Cara Membuat Tab Menu Dengan CSS Murni pada Blog/Website

Tab Menu CSS

Senin ini, saya menerbitkan 2 posting. Posting ini saya buat karena beberapa hari yang lalu ada yang bertanya tentang cara membuat tab css. Sebenarnya, saya pernah membahas  cara membuat tab menggunakan bootstrap. Namun, karena tidak semua orang menggunakan bootstrap di website maupun blognya, jadi saya buat tab dengan css tanpa plugin/library tambahan.

Tab Menu CSS

CSS tab yang saya buat pada posting ini menggunakan teknik yang sama yang digunakan pada CSS slider yang dibahas di blog ini, yaitu menggunakan event ‘checked’ pada input tipe radio. Kode untuk membuat CSS tab ini lebih sedikit daripada untuk membuat CSS slider. Jika dibandingkan dengan Tab yang menggunakan JS, tentu saja CSS tab lebih hemat source. Kode CSS inti untuk tab-nya, hanya sekitar 15 baris untuk 3 tab. Itupun sudah ditambahkan efek transisi. Selebihnya, hanya kode untuk mempercantik tampilannya saja agar lebih menarik.

Silahkan anda simak dan pahami kode dibawah ini :

<div class=”tab-container”>

<!– Menu tab –>
<input type=”radio” name=”tab-menu” class=”tab-menu-radio” id=”tab-menu1” checked />
<label for=”tab-menu1” class=”tab-menu”>Tab 1</label>

<input type=”radio” name=”tab-menu” class=”tab-menu-radio” id=”tab-menu2“/>
<label for=”tab-menu2” class=”tab-menu”>Tab 2</label>

<input type=”radio” name=”tab-menu” class=”tab-menu-radio” id=”tab-menu3“/>
<label for=”tab-menu3” class=”tab-menu”>Tab 3</label>
<!– End Menu tab –>

<div class=”tab-content”>


<!– Konten tab –>
<div class=”tab tab-1″>
<h1>This is CSS Tab 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.</p>
</div>

<div class=”tab tab-2″>
<h1>This is CSS Tab 2</h1>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada.</p>
</div>

<div class=”tab tab-3″>
<h1>This is CSS Tab 3</h1>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.
</p>
</div>
<!– Akhir Konten tab –>

</div>

– Kode yang saya beri warna merah, harus sesuai id pada tag <input>, dengan for pada tag <label>
– Menu tab bisa anda tambahkan jumlahnya, namun juga harus sesuai dengan jumlah konten tabnya.
– Kode berwarna hijau harus anda ganti dengan judul menu tab anda.
– Semua kode yang berada di dalam tag <div class=”tab tab-[angka]“>, adalah kode isi yang harus anda ganti jika tab css ini akan anda terapkan di blog anda.
/* Tab menu styling*/
input.tab-menu-radio {
display: none;
}
label.tab-menu {
display: inline-block;
float: left;
padding:10px 30px;
cursor: pointer;
z-index: 99;
}
/* End Tab menu styling*//* Tab content styling*/
.tab-content {
top:-3px;
clear: both;
width: 100%;
position: relative;
padding:20px;
background-color: #f7f7f7;
border-top:7px solid #333;
}
/* End Tab content styling*//* CSS tab core */
.tab-menu-radio:checked + label {
-webkit-transition:all 1s; /* Optional */
-moz-transition:all 1s; /* Optional */
transition:all 1s; /* Optional */
background-color: #333;
color: #fff;
}
.tab-content .tab {
height: 0;
opacity: 0;
}
#tab-menu1:checked ~ .tab-content .tab-1,
#tab-menu2:checked ~ .tab-content .tab-2,
#tab-menu3:checked ~ .tab-content .tab-3 {
-webkit-transition:opacity 1s; /* Optional */
-moz-transition:opacity 1s; /* Optional */
transition:opacity 1s; /* Optional */
height: auto;
opacity: 1;
}
/* End CSS tab core */
– Kode inti yang membuat css tab berada diantara /* CSS tab core */ dan /* End CSS tab core */
– Kode berwarna biru adalah selektor css yang merupakan perulangan. Jika tab anda ada 4, 5 atau berapapun, anda harus menambahkan barisnya sesuai urutan. Sebelumnya anda juga harus menambahkan HML untuk tab yang anda tambahkan tersebut.

Untuk melihat hasil/demo dan mendowload seluruh source kode-nya, anda bisa klik link dibawah ini

Cara menambahkan CSS Tab pada Blogger dan WordPress

CSS tab ini juga bisa langsung anda tambahkan pada widget di blog blogger maupun wordpress anda. Namun, perlu dicatat bahwa disini saya hanya memberikan tutorial menambahkan CSS tab pada 1 widget saja. Artinya, 3 tab di atas akan langsung ditambahkan pada 1 widget bertipe HTML dan sebelumnya anda harus mengedit dulu isi dan menu tab-nya sesuai kebutuhan. Jadi, masing-masing tab tidak mewakili 1 widget seperti yang biasa anda temukan di beberapa template.

Silahkan ikuti langkah-langkah dibawah ini :

1. Edit terlebih dahulu menu tab dan konten tab sesuai kebutuhan anda.

2. Menambahkan CSS Tab pada blogger.

a.  Login ke dashboard > Pilih blog > Layout/Tata letak > Tambahkan widget tipe HTML/Javascript.


b. Pastekan kode HTML di atas yang menu tab dan konten tab-nya sudah anda edit. Save.

c.  Sekarang, klik menu Template > Edit HTML.

d. Pastekan kode CSS di atas, tepat sebelum kode  </b:skin>. Save.

3. Menambahkan CSS Tab pada wordpress self hosted

a. Login ke Halaman Admin > Appearance > Widget > Tambahkan widget tipe Teks.

b. Pastekan kode HTML di atas yang menu tab dan konten tab-nya sudah anda edit. Save.

c. Sekarang, klik menu editor (Appearance > Editor), Pilih file Stylesheet (style.css)

d. Pastekan kode CSS di atas di bagian paling bawah. Save.

Selesai. Jika anda mengalami kesulitan atau error, silahkan tanya di komentar. Semoga bermanfaat

~Muhammad Syakirurohman~

30 thoughts on “Cara Membuat Tab Menu Dengan CSS Murni pada Blog/Website

Tinggalkan Balasan