Tab View Horizontal and Vertikal

Saat ini CSS3 sangat populer dalam mendesainn sebuah Situs Web atau  Blog. dengan tab yang akan kita buat sekarang ini, jelas banyak sekali manfaat yang akan kita dapat, diantaranya dengan sedikit ruang kita mampu menyimpan banyak hal kali ini Kolom Tutorial™ akan menyajikian kepada anda tentang bagaimana Cara Membuat Tab View Horizontal dan Vertikal.
Untuk Screenshotnya kurang lebih seperti ini :

VIEW A DEMO

Untuk cara Penerapannya :
1. Masuk ke akun blogger sobat
2. Kopi Paste kode HTML dibawah
3. Kopi Paste kode CSS di bawah dan taruh sebelum kode

HTML KODE HORIZONTAL

<div class="accordion horizontal">
<section id="about">
<h2><a href="#about">About Us</a></h2>
<p>TEXT ATAU KODE SOBAT DISINI</p>
</section>
<section id="services">
<h2><a href="#services">Services</a></h2>
<p>TEXT ATAU KODE SOBAT DISINI</p>
</section>

</div>

HTML KODE HORIZONTAL

<div class="accordion horizontal">
<section id="about">
<h2><a href="#about">About Us</a></h2>
<p>TEXT ATAU KODE SOBAT DISINI</p>
</section>
<section id="services">
<h2><a href="#services">Services</a></h2>
<p>TEXT ATAU KODE SOBAT DISINI</p>
</section>

</div>

CSS KODE

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/*Define Accordion box*/
.accordion { width:830px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#FFF; padding:10px;}
.accordion section:target:hover { background:#FFF; }
.accordion section:target h2 {width:100%;}
.accordion section:target h2 a{ color:#333; padding:0;}
.accordion section:target p {display:block;}
.accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide*/
.accordion section{ float:left;    overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
.accordion section:hover {background:#444;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}
/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px;
    -moz-transition:width 0.2s ease-out;
    -webkit-transition:width 0.2s ease-out;
      -o-transition:width 0.2s ease-out;
    -ms-transition:width 0.2s ease-out;
      transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}

/*Header of closed slide*/
.horizontal section h2 {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width:240px; position:relative; left:-100px; top:85px;
}

/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:0px;left:0;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
/*End Horizontal Accordion *********************************************************************/

/*Vertical Accordion *************************************************************************/
.vertical section{ width:100%; height:40px;
    -webkit-transition:height 0.2s ease-out;
    -moz-transition:height 0.2s ease-out;
      -o-transition:height 0.2s ease-out;
    -ms-transition:height 0.2s ease-out;
      transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:250px; width:97%; }

.vertical section h2 { position:relative; left:0; top:-15px; }

/*Set position of the number on the slide*/
.vertical section:after{ top:-60px;left:810px;}
.vertical section:target:after{ left:-9999px;}

Ok happy blogging sekian artikel tentang bagaimana cara membuat Tab View Horizontal and Vertikal.

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post