Cara Membuat Tab View dengan CSS3 Murni

Cara Membuat Tab View dengan CSS3 Murni

Cara membuat tab view dengan css3. Tab view sering digunakan seorang webdesigner untuk menghemat tempat / space, baik itu di dalam postingan maupun di sidebar. Banyak diantaranya bertebaran di internet tutorial tentang membuat tab view, namun sekarang saya akan membahas tutorial membuat tab view dengan menggunakan css3 murni tanpa menggunakan javascript.

Dengan tanpa menggunakan javascript tentu saja menguntungkan website kita dalam hal SEO. Karena hal tersebut akan mengurangi loading blog yang terlalu lama akibat perenderan oleh mesin ketika meload kode javascript. Selain itu apabila si pengguna browser tidak mengaktifkan javascript pada browsernya, efek dari tab view tetap terlihat.

Dan lebih asyiknya lagi, tab view ini telah dilengkapi dengan efek transisi yang membuat perpindahannya lebih halus, sehalus pipi Luna Maya, hahahahhaha...

DEMO

Penasaran? Yuk, check it out...

Cara membuat tab view dengan menggunakan CSS3 Murni tanpa Javascript

Untuk HTML silakan lihat disini.

<div class="tab-container">
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu1" checked="checked">
<label for="tab-menu1" class="tab-menu">Tab 1</label>
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu2">
<label for="tab-menu2" class="tab-menu">Tab 2</label>
<input type="radio" name="tab-menu" class="tab-menu-radio" id="tab-menu3">
<label for="tab-menu3" class="tab-menu">Tab 3</label>
<div class="tab-content">
<div class="tab tab-1">
<h1>This is CSS Tab 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.</p>
</div>
<div class="tab tab-2">
<h1>This is CSS Tab 2</h1>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada.</p>
</div>
<div class="tab tab-3">
<h1>This is CSS Tab 3</h1>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.</p>
</div>
</div></div>

Sedangkan untuk CSS nya silakan lihat dibawah ini.

/* CSS Tab styling is start here */

/* Tab menu styling*/

input.tab-menu-radio{display:none}

label.tab-menu{display:inline-block;float:left;padding:10px 30px;cursor:pointer;z-index:99}

/* End Tab menu styling*/

/* Tab content styling*/

.tab-content{top:-3px;clear:both;width:100%;position:relative;padding:20px;background-color:#f7f7f7;border-top:7px solid #333}

/* End Tab content styling*/

/* CSS tab core */

.tab-menu-radio:checked + label{-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s;background-color:#333;color:#fff}

.tab-content .tab{height:0;opacity:0}
#tab-menu1:checked ~ .tab-content .tab-1,#tab-menu2:checked ~ .tab-content .tab-2,#tab-menu3:checked ~ .tab-content .tab-3{-webkit-transition:opacity 1s;-moz-transition:opacity 1s;transition:opacity 1s;height:auto;opacity:1}

/* End CSS tab core */

/* CSS Tab Styling is end here */

Demikian informasi dan tutorial mengenai Cara membuat tab view dengan menggunakan CSS3 Murni tanpa Javascript, semoga bermanfaat.

Terimakasih telah membaca postingan agung jaka nugraha.

Wassalam

Cara Membuat Tab View dengan CSS3 Murni