2304 Views

Membuat Tab Html Javascript

Cara Membuat Tab Menu dapat dengan mudah dilakukan dengan bantuan jQuery, dengan sedikit pengaturan pada CSS akan membuat Menu Tab tampil sesuai dengan variasi yang diperlukan untuk disesuaikan dengan template yang digunakan.

Berikut gambaran screenshot Tab Html Javascript :

tab-menu

Untuk membuat Tab Menu cHtml Javascript berikut langkah-langkahnya :

1. File utama untuk menampilkan Tab, kita buat saja dengan nama index.php


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<h1>Pure Javascript, HTML 5 &amp; CSS3 Tabs</h1>
<div id="tabContainer">
<div id="tabs">
<ul>
<li id="tabHeader_1">Page 1</li>
<li id="tabHeader_2">Page 2</li>
<li id="tabHeader_3">Page 3</li>
</ul>
</div>
<div id="tabscontent">
<div class="tabpage" id="tabpage_1">
<h2>Page 1</h2>
<p>contoh isi/konten dari page 1</p>
</div>
<div class="tabpage" id="tabpage_2">
<h2>Page 2</h2>
<p>contoh isi/konten dari page2</p>
</div>
<div class="tabpage" id="tabpage_3">
<h2>Page 3</h2>
<p>contoh isi/konten dari page 3</p>
</div>
</div>
</div>
<a href="http://perpustakaan-ku.com/membuat-tab-html-javascript/">Back to Tutorial</a> </div>
<script src="tabs_old.js"></script>

</body>
</html>

2. Selanjutnya untuk mengatur tampilannya kita buat kode CSS seperti berikut :


* {
margin:0;
padding:0;
}

body {
background-color: #cccccc; top left;
font: .8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

h2{
margin-bottom:10px;
}

#wrapper{
width:720px;
margin:40px auto 0;
}

#wrapper h1{
color:#FFF;
text-align:center;
margin-bottom:20px;
}

#wrapper a{
display:block;
font-size:1.2em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}

#tabContainer {
width:700px;
padding:15px;
background-color:#2e2e2e;
-moz-border-radius: 4px;
border-radius: 4px;
}

#tabs{
height:30px;
overflow:hidden;
}

#tabs > ul{
font: 1em;
list-style:none;
}

#tabs > ul > li{
margin:0 2px 0 0;
padding:7px 10px;
display:block;
float:left;
color:#FFF;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius:4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background: #C9C9C9; /* old browsers */
background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

#tabs > ul > li:hover{
background: #FFFFFF; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
cursor:pointer;
color: #333;
}

#tabs > ul > li.tabActiveHeader{
background: #FFFFFF; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
cursor:pointer;
color: #333;
}

#tabscontent {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding:10px 10px 25px;
background: #FFFFFF; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
margin:0;
color:#333;
}

Berikut cara membuat tab menu html/javascript, silahkan download source codenya dibawah ini :

Kata Kunci :

Leave a Reply

Your email address will not be published. Required fields are marked *