Responsive Tabbed Content

Setelah beberapa hari disibukan dengan berbagai persiapan menjelang event tahun baru ditambah lagi jaringan speedy yang kena amukan bus akhirnya punya sedikit waktu untuk kembali berbagi sebuah tutorial sederhana , yaitu membuat sebuah tabbed content ( tulisan ) yang sederhana dengan CSS3. Tapi memang tidak sesederhana itu karena tabbed ini memiliki fitur responsive dan lihat demonya hehehe ...


CSS3 
.tabs {
position: relative;
font: normal normal 400 0 
'Electrolize', Helvetica, Arial, sans-serif;
color: #fff
}
.tabs input {display: none}
.tabs label {
position: relative;
z-index: 1;
display: inline-block;
width: 25%; /* 4 TABS = 100/4 = 25% */
box-sizing: border-box;
border: 1px solid #222;
border-left-color: #555;
font-size: 17px;
line-height: 45px;
cursor: pointer;
user-select: none
}
.tabs label span {
display: block;
padding: 5px;
background: #444
}
.tabs label span span {
padding: 0 20px;
background: transparent;
border-radius: 3px;
transition: background 0.4s
}
.tabs label:hover span span {background: #39a1dd}
.tabs input:checked + label {cursor: default}
.tabs input:checked + label span span {
background: #39a1dd
}
.tabs ul {
list-style: none;
position: relative;
display: block;
font: normal normal 400 15px 
'Roboto', Helvetica, Arial, sans-serif
}
.tabs ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: auto;
padding: 25px;
background: #444;
box-sizing: border-box;
opacity: 0;
transition: all .4s;
border-top: 1px solid #666;
border-right: 1px solid #222
}
.tabs > .content1:checked ~ ul > .content1,
.tabs > .content2:checked ~ ul > .content2,
.tabs > .content3:checked ~ ul > .content3,
.tabs > .content4:checked ~ ul > .content4 {
  /* ADD MORE AS NEEDED */
position: relative;
z-index: 1;
opacity: 1;
transform: none
}
/* RESPONSIVE STACKING */
@media screen and (max-width: 780px) {
.tabs label {
display: block;
width: 100%;
border: 0;
padding-right: 0;
padding-left: 0;
text-align: left
}
  
.tabs ul {
margin-top: 0;
margin-right: 0;
margin-left: 0
}
}
/* FONTAWESOME */
.fa {
  margin-right: 10px;
  font-size: 20px;
  /* vertical-align: middle */ /* FONT SIZE 20+ */
}
/* A SAMPLE EFFECT - SLIDE DOWN */
.tabs ul li {transform: translateY(30px)}
/* RANDOM STUFF FOR THE PAGE */
.center { display: table; margin: 0 auto }
.italic { 
  color: #fff;
  font: italic normal 400 14px
    Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
  display: inline-block
}
.italic:before, .italic:after {
  content: '_';
  position: relative;
  color: #3cf;
  top: -7px;
  margin: 10px
}
::selection {
  background: transparent;
  color: #3cf
}
::-webkit-scrollbar { display: none }

HTML costumize
<div class="tabs">
<!--TAB 1-->
<input type="radio" name="tabs" checked id="tab1" class="content1">
<label for="tab1">
<span>
<span><div class="fa fa-home"></div>Tab 1
</span>
</span>
</label>
<!--TAB 2-->
................

Tabbed Selanjutnya .... 

</div>

Selebihnya silahkan kreasikan sendiri .

Resource : JustAnotherCoder

16 komentar

pertamax sob
ini bisa ane praktekkan di gubuk ane ga sob, seperti yang sob blg tinggal desain sedikit maka jd tu template gubuk ane, hehehehe
thanks

mantaaaaaap kang ... :) masang kode nya dimana kang ? ... dipostingan atau harus edit template hehee

wah si akang cerdas pisan euy.. gak kepikiran bakal bikin kayak gini haha.. nice kang :-bd

ada yg pake css target lebih mudah.

ada yg pake css target lebih mudah.

Makin hari makin keren aja sih kang :)

bisa dong tinggal dipasang aja hee

dipostingan juga bisa kang .. kalau di edit html css diatas ]]></b:skin> dan kode html mah bebas kang dimana akang suka hehe

haha ... lumayan lah

sebenarnya ini bisa dibikin lebih .. bukan sekedar untuk tabbed sob

aku jadi tersanjung mas bud wkwkwkwk

keren , bermanfaat sekali gan .

kunjungan perdana , izin follow ,

silahkan sob ....

Keren kang... sepertinya cocok di simpen dina potingan nya kang... hmmm...kanggo ngawadahan naon nya? hoyong nyiboan bingung eusina...

Mangga kang eusian kunaon we asal ulah ku beas hahaha