Bikin Menu Tab View

Fungsi utama menu tab view memungkinkan untuk lebih menyederhanakan tampilan yang rumit dan berkesan acak-acakan menjadi lebih menarik. Dan itu sih kata orang. Bukan kata aku yah. Dan cara membuatnya pun lebih mudah dan menarik dibanding yang lainnya. Mau dicoba?

Langsung aja neh bisa kamu lihat demonya di bawah ini:

Menu 1 Menu 2 Menu 3

Tulisan dan apa yang mau di simpan di menu 1

buat menu 2

buat menu 3

Nah mau bikin menu tab view yang seperti di atas?

Berikut cara bikinnya:

Copas kode di bawah ini:

Kode CSS
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100%px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000000
padding: 2 2 2 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "comic sans ms; /* Font Kotak Tab */
font-size: 11px; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #E1E1E1
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

Kode HTML
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a><span style="color: #fff">Menu 1</span></a>
<a><span style="color: #fff">Menu 2</span></a>
<a><span style="color: #fff">Menu 3</span></a>
</div>

<div style="width: 100%; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Tulisan dan apa yang mau di simpan di menu 1
</div>
</div>

<div class="Page">
<div class="Pad">
buat menu 2
</div>
</div>

<div class="Page">
<div class="Pad">
buat menu 3

</div>
</div>
</div>
</div>
</form>

Kode Script
<script src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Urutan bikinnya pilih add gadget >>
Html&javascript >>
Letakkan kode yang udah dicopas >> Simpan

Gitu. Dan lihat hasilnya. Baguskan?