bingung mau ngapain lagi ya dari pada bengong klik san amari mending saya bagikan daja ilmu yang bermanfaat, gatau kenapa hari ini mau refreshing otak, yang biasannya kalo di depan komputer itu kerjaannya ga lagi lain ya pasti ngoding aja hehe sampe sampe lupa waktu saking hobbynya tapi di maalam yang hujan ini #di sini hujan lohh saya akan membagikan bagaimana sih cara membuat tab menggunakan CSS, tanpa bantuan Javascript atau JQuery, kalo sebelumnya saya membuat tab ini menggunakan JQuery tapi saya sekarang ingin membuatnya menggunakan CSS 3 mau taukan caranya ?? okk langsung aja ikutin langkah langkah berikut
- langkah pertama seperti biasa buka teks editor seperti notepad,notepad ++,dreamweaver atau yang lainnya kalo di saranin #jangan meke word yahh heheh :D
- kemudian buat file baru dan ketikan baris kode seperti berikut
<html>
<head>
<title>contoh tab dengan css</title>
<style type="text/css">
#tab1:checked ~ .content1,#tab2:checked ~ .content2,#tab3:checked ~ .content3{
background: #735220;
display: block;
}
.content1,.content2,.content3{
display: none;
clear: both;
border: 1px solid #797979;
background: #fff !important;
clear: both;
z-index: 444;
padding: 5px;
width: 500px;
}
#tab1:checked ~ #label1,#tab2:checked ~ #label2,#tab3:checked ~ #label3{
border: 1px solid #797979;
border-top:3px solid #728D7B;
border-bottom:1px solid transparent;
}
#label1,#label2,#label3{
display: block;
width: 70px;
float: left;
background: #F4F4F4;
padding:10px 15px 10px 15px;
z-index: 9999;
margin-bottom:-1px;
cursor: pointer;
}
.media{
max-height:600px;
max-width:100%;
overflow: auto;
}
#tab1,#tab2,#tab3{
opacity: 0;
}
</style>
</head>
<body>
<input type="radio" name="tab" id="tab1" checked="checked">
<label id="label1" for="tab1" >Tab1</label>
<input type="radio" name="tab" id="tab2">
<label id="label2" for="tab2">Tab2</label>
<input type="radio" name="tab" id="tab3">
<label id="label3" for="tab3">Tab3</label>
<div class="content1">
Conten Tab 1
</div>
<div class="content2">
Conten Tab 2
</div>
<div class="content3">
Conten Tab 3
</div>
</body>
</html> coba simpan file dan coba jalankan ^.^ it's work
disitu ada 3 buah tab dan konten dari masing masing tab anda juga bisa merubah konten dari masing masing tab tersebut pada kode yang berwarna merah dan merubah nama tabnya pada kode yang berwarna biru, untuk penggunaan style coba anda ubah sesuai kreatifutas anda sendiri selamat mencoba
Hasil akhir :
Conten Tab 1
Conten Tab 2
Conten Tab 3
0 comments:
Post a Comment