Modifikasi Tab View Menu

Saturday, 5 February 2011

          Pada kesempatan ini ijinkanlah saya untuk share ilmu yang sebenarnya udah banyak di poskan di blog-blog yang lain, tapi gak ada salahnya saya ulangin lagi.., capa tau berbeda hasilnya...he, andai kata makanan tuch, biarnamanya sama tapi rasanya beda...

         Langsung aja dech.., pada tau efek hover gak?.....itu tuch yang ketika mouse kita arahkan ke dia, bisa berganti tampilan nie, tak kasih contohnya.., Cobah arahkan cursormu ke teks di bawah ini..,

EFEK HOVER

nah itulah yang dinamakan hover, tau kan? sekarang kita tidak memikirkan giamana caranya buat itu, akan tetapi kita akan coba buat tab view menu dengan efek hover itu sendiri. Gak susah kok., simak ulasan berikut ini

1. Ini adalah yang dinamakan tab view menu.dah tau kan , tapi biasanya gak ada efek apa-apa

sciptnya adalah sebagai berikut :

<style type="text/css">
div.TabView div.Tabs
{height: 24px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 63px; /* Lebar Menu Utama Atas */
text-align:center ; height: 20px; /* Tinggi Menu Utama Atas */
padding-top:3px; vertical-align:middle; border:1px solid #00FF00; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Niagara Engraved", Serif; /* Font Menu Utama Atas */
font-weight:normal; color:#ffffff; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover(kita tambahkan Menu Hovernya disini), div.TabView div.Tabs a.Active
{background-color: #000000; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #00FF00; /* Warna border Kotak Utama */ overflow:hidden;text-decoration: none; font-
family: "Bradley Hand ITC", Serif;
font-weight:normal; color:#00ff00; background-color:Black; /*

Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
(kita tambahkan Hover kotaknya disini)
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>menu 1</a>
<a>Manu 2</a>
<a>Menu 3</a>
</div>
<div style="width:193px; height:274px; " class="Pages">
<div class="Page">
<div class="Pad">
alamat link Menu 1
</div>
</div>
<div class="Page">
<div class="Pad">
alamat link Menu 2
</div>
</div>
<div class="Page">
<div class="Pad">
alamat link Manu 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>

2. Sekarang kita coba buat kasih efek hovernya di areal menu utama dan kotak menunya jadi kita hanya perlu menambahkan script di bawah ini pada tulisan yang berwarna hijau,diatas

a:hover {
background : transparent url(http://i1080.photobucket.com/albums/j322/ipul3/d-1-1.gif) repeat scroll 0 0; /*
warna background menu hover */
color: #B45F04;
font-weight: normal;
}

Oleh karena kotak menunya tidak ada hovernya, maka kita perlu menambahkan script ini di bawah tulisan yang berwarna merah diatas

font-size: 13px; /* besar hurup kotak utama */
font-family: "Bradley Hand ITC",Serif; /* jenis hurup kotak menu*/
}
div.TabView div.Pages.Active {
background : transparent; /* warna background menu aktif */
color: white;
}
div.TabView div.Pages:hover {
background : transparent url('http://i1080.photobucket.com/albums/j322/ipul3/koleksi/Kumpulan%20Gif/petir-
1.gif') repeat scroll 0 0; /* warna background kotak hover */
color: #ffffff;
font-weight: normal;
}

Dan tapilannya akan jadi seperti yang ada pada  tab view menu saya itu...

coba arahkan mouse ke menunya kita akan dapatkan background menunya akan bertambah dengan kilatan-kilatan petir.

Bagaimana??? mantap tidak?, kalian bisa ganti Url yang berwarna Hijau dengan alamat gambar yang kamu mau.., woke, selamat mencoba..,

Labels: Blog trik

Thanks for reading Modifikasi Tab View Menu. Please share...!