telah di coba di widget html/javascript dengan mengabung semua susunan.
silahkan di edit dan masukan keruang posting .
Compatible Browsers ;IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
<div class="tabbed-view">
<!--tabbed 01 Starts here-->
<form>
<div class="tab-container white top">
<label class="tab-label">
<input class="tab-radio" type="radio" name="page" value="page5" checked="checked"/>
<h2 class="tab">Description</h2>
<article class="tab-page" id="page5">
<h3>Description</h3>
<h4>This is just a demo. In the item you will find the whole set of colors and tab positions</h4>
<h5>Pure CSS3 Tabs is a quick and easy solution for sidebars, pages with lot of contents or single-page websites.</h5>
<h3>Features</h3>
<ul>
<li><strong>3 Tab Positions</strong></li>
<li><strong>Responsive</strong></li>
<li><strong>7 color variations + special</strong>
<ul>
<li>White</li>
<li>Blue</li>
<li>Orange</li>
<li>Green</li>
<li>Grey</li>
<li>Dark</li>
<li>Pink</li>
<li><strong>NEW</strong> Photo Background</li>
</ul>
</li>
<li><strong>CSS Animations</strong></li>
<li>Choose your Default Open Tab</li>
<li>Fits to the width of the <i>div</i> it will be placed into</li>
<li>Pure CSS3</li>
<li>Perfect for big articles, data sheets, sidebars</li>
<li>Works on all major browsers</li>
<li>Open Source fonts and icons used</li>
<li>pdf instructions included</li>
<li>Support available through my profile page</li>
</ul>
</article>
</label>
<label class="tab-label">
<input class="tab-radio" type="radio" name="page" value="page6" />
<h2 class="tab">Specifications</h2>
<article class="tab-page" id="page6">
<h3>Specifications</h3>
<h4>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. </h4><p>Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus.</p><p> Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna nibh ut arcu. Aliquam in lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla placerat aliquam wisi.</p><p> Mauris viverra odio. Quisque fermentum pulvinar odio. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.</p>
</article>
</label>
<label class="tab-label">
<input class="tab-radio" type="radio" name="page" value="page7" />
<h2 class="tab">Support</h2>
<article class="tab-page" id="page7">
<h3>Support</h3>
<h4>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. </h4><p>Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus.</p><p> Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna nibh ut arcu. Aliquam in lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla placerat aliquam wisi.</p><p> Mauris viverra odio. Quisque fermentum pulvinar odio. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.</p>
</article>
</label>
<label class="tab-label">
<input class="tab-radio" type="radio" name="page" value="page8" />
<h2 class="tab">Where to Buy</h2>
<article class="tab-page" id="page8">
<h3>Where to Buy</h3>
<h4>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. </h4><p>Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus.</p><p> Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna nibh ut arcu. Aliquam in lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla placerat aliquam wisi.</p><p> Mauris viverra odio. Quisque fermentum pulvinar odio. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.</p>
</article>
</label>
</div>
</form>
</div>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"/>
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans|Marvel:400,700,400italic|Exo+2:200,400);
html, body {
margin: 0;
}
.tabbed-view{
width:740px;
margin:50px auto;
position:relative;
display:block;
clear:both
}
.tab-container{
padding: 0;
text-align: left;
position: relative;
display: block;
height:auto;
clear:both;
}
.tab-container:after{
display:block;
content:'';
clear:both;
}
.tab-container.top{
margin: 60px 0 20px 0;
min-height:500px;
}
.tab-container.left{
margin: 40px 0 20px 130px;
min-height:650px;
}
.tab-container.right{
margin: 40px 130px 20px 0;
min-height:650px;
}
.tab-container .tab-radio{
display: none;
}
.tab-container .tab{
display: block;
color: #888;
margin: 0;
padding: 3px 10px;
text-decoration: none;
text-align: center;
cursor: pointer;
font-family: 'Marvel', cursive;
font-size:16px;
line-height:30px;
}
.tab-container.top .tab{
width: auto;
height: 30px;
float: left;
position: relative;
top: 0px;
z-index:0;
-webkit-box-shadow:0 -3px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 -3px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 -3px 4px rgba(0, 0, 0, 0.3);
}
.tab-container .tab-radio:checked ~ .tab,
.tab-container .tab-radio:active ~ .tab{
z-index: 1;
}
.tab-container.top .tab-radio:checked ~ .tab, .tab-container.bottom .tab-radio:checked ~ .tab{
width: auto;
}
.tab-container .tab-radio:checked ~ .tab:before{
content: "";
}
.tab-container .tab-radio:checked ~ .tab:before{
font-family: 'FontAwesome';
font-weight:normal;
}
.tab-container.top .tab-radio:checked ~ .tab:before{
content: "\f107 ";
}
.tab-container .tab-page{
visibility: hidden;
z-index: 50;
display:block;
position: absolute;
padding: 20px 20px 30px 20px;
margin:0;
-moz-transition: visibility 0s ease-out 0.3s;
-ms-transition: visibility 0s ease-out 0.3s;
-o-transition: visibility 0s ease-out 0.3s;
-webkit-transition: visibility 0s ease-out 0.3s;
transition: visibility 0s ease-out 0.3s;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
min-height: 430px;
}
.tab-container.top .tab-page{
top: 35px;
left: 0px;
}
.tab-container.rounded.top .tab-page {
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.tab-container .tab-page h3, .tab-container .tab-page h4 {
font-family: 'Exo 2', sans-serif;
margin:0 0 10px 0;
}
.tab-container .tab-page h3 {
font-size:40px;
font-weight:200;
}
.tab-container .tab-page h4 {
font-size:21px;
font-weight:400;
}
.tab-container .tab-radio:checked ~ .tab-page{
visibility: visible;
}
.tab-container .tab-page > *{
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
-moz-transition: opacity 0.3s ease-out 0s;
-ms-transition: opacity 0.3s ease-out 0s;
-o-transition: opacity 0.3s ease-out 0s;
-webkit-transition: opacity 0.3s ease-out 0s;
transition: opacity 0.3s ease-out 0s;
}
.tab-container .tab-radio:checked ~ .tab-page > *{
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
-moz-transition: opacity 0.3s ease-in 0.15s;
-ms-transition: opacity 0.3s ease-in 0.15s;
-o-transition: opacity 0.3s ease-in 0.15s;
-webkit-transition: opacity 0.3s ease-in 0.15s;
transition: opacity 0.3s ease-in 0.15s;
}
.tab-container article{
font-family: 'Alegreya Sans', sans-serif;
}
.tab-container .tab-radio ~ .tab:after{
position:absolute;
display:block;
z-index:200;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px 50px 0 0;
border-color: #ffffff transparent transparent transparent;
}
.tab-container .tab-radio ~ .tab{
background-color:rgb(236,240,241);
}
.tab-container .tab-radio:checked ~ .tab{
color:rgb(0,0,0);
}
.tab-container article p {
line-height:140%;
}
@media screen and (max-width: 768px) {
.tabbed-view {
position:relative;
width:100%;
height:700px;
margin:120px 0 0 0;
display:block;
}
.tabbed-view:after, .tab-container:after, .tab-container .tab-page:after {
display:block;
clear:both;
content:"";
}
.tab-container.top, .tab-container.right, .tab-container.left{
margin: 30px 0;
padding: 0;
text-align: left;
position: relative;
display: block;
height:auto;
}
.tab-container.top .tab, .tab-container.right .tab, .tab-container.left .tab{
display: block;
width: 100%;
height: 30px;
position: relative;
top: -110px;
padding: 3px 0;
text-decoration: none;
text-align: center;
cursor: pointer;
font-family: 'Marvel', cursive;
font-size:20px;
line-height:30px;
z-index:10;
left:0;
-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);
box-shadow:0 0 4px rgba(0, 0, 0, 0.3);
}
.tab-container.top .tab-radio:checked ~ .tab, .tab-container.right .tab-radio:checked ~ .tab,.tab-container.left .tab-radio:checked ~ .tab{
width: 100%;
position:absolute;
left:0;
top:0;
}
.tab-container.top .tab-page, .tab-container.bottom .tab-page, .tab-container.left .tab-page{
visibility: hidden;
z-index: 50;
display:block;
position: absolute;
top: 30px;
left: 0px;
float: left;
padding: 20px 20px 30px 20px;
margin:100;
-moz-transition: visibility 0s ease-out 0.3s;
-ms-transition: visibility 0s ease-out 0.3s;
-o-transition: visibility 0s ease-out 0.3s;
-webkit-transition: visibility 0s ease-out 0.3s;
transition: visibility 0s ease-out 0.3s;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
height: 600px;
}
.tab-container.top .tab-radio:checked ~ .tab:before, .tab-container.right .tab-radio:checked ~ .tab:before, .tab-container.left .tab-radio:checked ~ .tab:before{
content: "\f107 ";
}
}
/*Color Variations*/
.tab-container.white label, .tab-container .tab-radio:checked ~ .tab,
.tab-container.white .tab-radio:active ~ .tab, .tab-container.white article {
background-color:rgb(250,250,250);
color:#333;
}
.tab-container.white .tab:hover {
background-color:rgb(230,230,255);
color:#333;
}
.tab-container.white article p {
color:#333;
}
.tab-container.white .tab-radio ~ .tab{
background-color:rgb(236,240,241);
}
.tab-container.white .tab-radio:checked ~ .tab, .tab-container.white .tab-radio:hover ~ .tab{
background-color:rgb(250,250,250);
color:rgb(0,0,0);
}
Tambahkan komentar Komentator
Konversi KodeOOT