PURE CSS TAB MENU

Pure CSS Tab Menu on Webkit-based Browser. Dapat lagi artikel yang unik dan gaya nih :D Tahu dong dengan tab menu atau multi tab. Banyak kali mungkin postingan yang sudah memaparkan dari layanan trik ini :P Di blog ini saja ada dua biji tuh si tab-menunya :"> Kebanyakan dalam penggunaan trik ini melibatkan dengan si Javascript ;)) Liat tuh openingnya pake bahasa orang kulon tuh b-) Tab menu murni dengan menggunakan CSS huehuehue.

Trik yang didapat seperti biasa ;) BeBeN si bloglang ganteng kalem tea, dari Master Hidayat Sagita. Pasti tidak pada kenal yah :-q huuu... 3:-O ...sama =)) Tidak lain dan tidak bukan master tersebut adalah pemilik dari www.webstuffshare.com. Postingannya inggris tahunya orang kita...;)) :"> Postingannya gaya-gaya juga euy...sok pada belajar juga kesana :-"

Pure CSS Tab Menu on Webkit-based Browser dan ini versi uptodatenya Updated : Pure CSS Tab Menu ini demonya Demo Pure CSS Tab Menu hehe...:D. Nah kalau yang ini versi BeBeN yang masih bawaan dari kode-kode yang diciptakan oleh si-empunya. Demo tidak ada, screenshot :p

Berikut kode yang BeBeN modif...;)) :">

#container {
margin-top: 1%;
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 1.5em;
font-size: 13px;
}
.hsbbn{
margin-left: auto;
margin-right: auto;
position:relative;
width: auto;
height: 300px;
background:#777;
text-align: left;
color: #fff;
overflow:hidden;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
}
.one, .two, .three, .four {
width: 250px;
float: left;
position: absolute;
}
.one-menu, .two-menu, .three-menu, .four-menu {
position: absolute;
display: inline;
width: 100px;
height: 23px;
margin:0;
padding: 0;
border: 1px solid #000;
background:#21BECE;
text-align: center;
}
.two {
margin-left: 7.5em;
}
.three {
margin-left: 15em;
}
.four {
margin-left: 22.5em;
}
.content {
opacity: 0;
margin-top: 3.5em;
width: 370px;
padding: 0 10px;
}
input {
border: 0;
cursor: pointer;
background: none;
color: #daf2fa;
font-size: 15px;
}
.one-menu:focus, .two-menu:focus, .three-menu:focus, .four-menu:focus {
background: #0cf;
cursor: pointer;
}
.one-menu:focus + div.content {
opacity: 1;
}
.two-menu:focus + div.content {
opacity: 1;
margin-left: -7.5em;
}
.three-menu:focus + div.content {
opacity: 1;
margin-left: -15em;
}
.four-menu:focus + div.content {
opacity: 1;
margin-left: -22.5em;
}

Kode HTML-nya...

<style>
#container {
margin-top: 1%;
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 1.5em;
font-size: 13px;
}
.hsbbn{
margin-left: auto;
margin-right: auto;
position:relative;
width: auto;
height: 300px;
background:#777;
text-align: left;
color: #fff;
overflow:hidden;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
}
.one, .two, .three, .four {
width: 250px;
float: left;
position: absolute;
}
.one-menu, .two-menu, .three-menu, .four-menu {
position: absolute;
display: inline;
width: 100px;
height: 23px;
margin:0;
padding: 0;
border: 1px solid #000;
background:#21BECE;
text-align: center;
}
.two {
margin-left: 7.5em;
}
.three {
margin-left: 15em;
}
.four {
margin-left: 22.5em;
}
.content {
opacity: 0;
margin-top: 3.5em;
width: 370px;
padding: 0 10px;
}
input {
border: 0;
cursor: pointer;
background: none;
color: #daf2fa;
font-size: 15px;
}
.one-menu:focus, .two-menu:focus, .three-menu:focus, .four-menu:focus {
background: #0cf;
cursor: pointer;
}
.one-menu:focus + div.content {
opacity: 1;
}
.two-menu:focus + div.content {
opacity: 1;
margin-left: -7.5em;
}
.three-menu:focus + div.content {
opacity: 1;
margin-left: -15em;
}
.four-menu:focus + div.content {
opacity: 1;
margin-left: -22.5em;
}
</style>

<div id="container">
<div class="hsbbn">
<div class="one">
<input class="one-menu" value="Latest" readonly="readonly" />
<div class="content">
////////// //////////
CONTENTNYA DISINI
////////// //////////
</div>
</div>
<div class="two">
<input class="two-menu" value="Today" readonly="readonly" />

<div class="content">
////////// //////////
CONTENTNYA DISINI
////////// //////////
</div>
</div>

<div class="three">
<input class="three-menu" value="This Week" readonly="readonly" />
<div class="content">
////////// //////////
CONTENTNYA DISINI
////////// //////////
</div>
</div>

<div class="four">
<input class="four-menu" value="This Month" readonly="readonly" />
<div class="content">
////////// //////////
CONTENTNYA DISINI
////////// ////////// </div>
</div>
</div>

Powered by : www.webstuffshare.com

Permiooosss...!!!