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 :



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.

Berlangganan update artikel terbaru via email:

4 Responses to "Tab View Horizontal and Vertikal"

  1. Ini ne yang aku cari beberapa hari lalu..
    Thanks ya atas informasinya..
    Sangat bermanfaat..

    Jangan lupa tengok kampungku -->> http://harpa82.blogspot.com/

    ReplyDelete
  2. kok kaga bisa dalam 1 pos?sesuai demo dong skripnya...

    ReplyDelete
  3. yang bener mas, coba periksa lagi langkah penerapannya step by step

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel