Skip to main content

Cara Membuat Tabs Menu Tanpa JavaScript



Cara membuat Tabs Menu tanpa menggunakan JavaScript dan sebagai gantinya menggunakan CSS metode HTML Radio Checked. Berawal dari tertarik ingin memiliki style seperti ini di blog saya dan kebetulan ada scriptnya di salah satu template gratis yang saya koleksi, namun sayangnya itu menggunakan JS, jadi saya cari di Google cek satu2 baca posting orang ketemulah ini. Berikut ini contohnya.

<style>
.container-wrapper {
margin:0;
width: 100%;
position: relative;
overflow: hidden;
}
input.tab-menu-radio {
display: none;
}
label.tab-menu {
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
float: left;
padding:10px 20px;
cursor: pointer;
z-index: 99;
}
.tab-content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
word-break: break-word;
clear: both;
padding:20px;
background-color: #f7f7f7;
border-top:7px solid #333;
}
.tab-menu-radio:checked + label {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
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;
-moz-transition:opacity 1s;
transition:opacity 1s;
height: auto;
opacity: 1;
}
</style>
<div class="container-wrapper">
<div class="tab-container">
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu1" checked/>
<label for="tab-menu1" class="tab-menu">Downlad</label>
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu2"/>
<label for="tab-menu2" class="tab-menu">Credit</label>
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu3"/>
<label for="tab-menu3" class="tab-menu">Licence</label>
<div class="tab-content">
<div class="tab tab-1">
<div class="santuy">Content 1</div>
</div>
<div class="tab tab-2">
<div class="santuy">Content 2</div>
</div>
<div class="tab tab-3">
<div class="santuy">Content 3</div>
</div>
</div>
</div>
</div>

Contoh hasilnya:


Mohon maaf sebelumnya kalau linknya tidak aktif, silakan salin saja linknya ke browser, soalnya takut jadi brokenlink kalau diaktifkan.

https://drive.google.com/file/d/1J7FpHZu4rpPOhZGHoBn0SAfcGNngyfNH/view?usp=drivesdk
Author : Muhammad Syakirurohman
URL : http://www.syakirurohman.net
Source : http://www.syakirurohman.net/2015/02/tutorial-membuat-tab-menu-css.html

Lisensi :

Anda bebas menggunakan, memperbanyak, and membagikan bundle ini baik untuk dipakai, diedit ulang, belajar, pelengkap atau digunakan pada proyek komersial. Namun anda tidak berhak menjual bundle ini tanpa izin! Jika ingin re-share, harap sertakan file ini dan jangan dirubah..

Hargailah kerja keras orang lain. Terima kasih
Licence :

You are free to use, copy/duplicate, and share this bundle for usage, modifying, learning purpose, and complement of comercial project. But, you are not allowed to sell this template. If you want to re-share, please include this file and do not modified.

Respect Other people work. Thanks