How To Make Responsive Tabbed Content

How To Make Responsive Tabbed Content - Malam sobat, kali ini SMZ akan membagikan tutorial sederhana yaitu "How To Make Responsive Tabbed Content" tutorial kali ini adalah pengembangan dari Menu Multi Tab .

DEMO

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">
<!--Menu 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>
<!--Menu TAB 2-->
................

Tabbed Selanjutnya .... 

</div>

Selebihnya bisa sobat silahkan kreasikan sendiri .

Tweet