Senin, 09 Agustus 2010

Amazing Glider Menu

Kemarin siapa yak yang menanyakan "gimana cara bikin CBox bisa gitu" ;)) :D lupa namanya :"> :p Karena alamat link cara buatnya lupa yaa jawab ajah lupa gimana cara bikinnya :)) Sekarang mah sudah ketemu nih Codelifter, silahkan kalau sobat mau membaca versi aslinya ;) Kalau mau yg sudah dirombak macam kayak aku Beben si bloglang ganteng kalem, ya tinggal ngikutin ajah postingan berikut ini. Bagaimana cara membuat amazing glider menu ;)) yg dimodif jadi Cbox :))

Kode CSS

Letakkan diatas/sebelum kode ]]></b:skin>
#menuShow{
border:none;
position:fixed;
margin-top:33px
}
#menuSelect{
border:3px solid #f60;
background-color:#F7DFB5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
position:fixed;
width:auto;
height:auto;
padding:5px;
}
Setelah itu cari kode </body> dan letakkan script berikut ini diatasnya...read more dulu ;))

Script

<script type='text/javascript'>//<![CDATA[
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.
Show="yes";var OffX=-300;var PosX=0;var PosY=0;var speed=10;var increment=15;var incrementNS4=5;var is_NS=navigator.appName=="Netscape";var is_Ver=parseInt(navigator.appVersion);var is_NS4=is_NS&&is_Ver>=4&&is_Ver<5;var is_NS5up=is_NS&&is_Ver>=5;var MenuX=OffX;var SelX=PosX;var sPosX=PosX;var sOffX=OffX;if(Show=="yes"){sPosX=OffX;sOffX=PosX;MenuX=sOffX;SelX=sPosX;}
if(is_NS4){increment=incrementNS4;Lq="document.layers.";Sq="";eval(Lq+'menuSelect'+Sq+'.left=sPosX');eval(Lq+'menuShow'+Sq+'.left=sOffX');eval(Lq+'menuSelect'+Sq+'.top=PosY');eval(Lq+'menuShow'+Sq+'.top=PosY');}else{Lq="document.all.";Sq=".style";document.getElementById('menuSelect').style.left=sPosX+"px";document.getElementById('menuShow').style.left=sOffX+"px";document.getElementById('menuSelect').style.top=PosY+"px";document.getElementById('menuShow').style.top=PosY+"px";}
function moveOnMenu(){if(MenuX<PosX){MenuX=MenuX+increment;if(is_NS5up){document.getElementById('menuShow').style.left=MenuX+"px";}else{eval(Lq+'menuShow'+Sq+'.left=MenuX');}
setTimeout('moveOnMenu()',speed);}}
function moveOffMenu(){if(MenuX>OffX){MenuX=MenuX-increment;if(is_NS5up){document.getElementById('menuShow').style.left=MenuX+"px";}else{eval(Lq+'menuShow'+Sq+'.left=MenuX');}
setTimeout('moveOffMenu()',speed);}}
function moveOffSelector(){if(SelX>OffX){SelX=SelX-increment;if(is_NS5up){document.getElementById('menuSelect').style.left=SelX+"px";}else{eval(Lq+'menuSelect'+Sq+'.left=SelX');}
setTimeout('moveOffSelector()',speed);}}
function moveOnSelector(){if(SelX<PosX){SelX=SelX+increment;if(is_NS5up){document.getElementById('menuSelect').style.left=SelX+"px";}else{eval(Lq+'menuSelect'+Sq+'.left=SelX');}
setTimeout('moveOnSelector()',speed);}}//]]>
</script>
Setelah itu untuk kode HTML, letakkan didalam tag
<body>
blah
bleh
bloh
</body>
Yang penting jangan sampai bentrok dengan penutup tag yg lainnya yah ;)

Kode HTML

<div id="menuSelect">
<center><a href="#" onClick="moveOnMenu();moveOffSelector()">
<img src="http://LINK-GAMBAR-CLOSE.jpg" width="" height="" border="0"></a></center>
ISI
KONTENT
LETAKKAN DISINI
</div>

<div id="menuShow">
<a href="#" onClick="moveOffMenu();moveOnSelector()">
<img src="http://LINK-GAMBAR-ENGSEL.jpg" width="" height="" border="0"></a>
</div>
Gantilah link gambar dengan selera sobat masing²...dan gantikan tulisan ISI KONTENT LETAKKAN DISINI dengan kontent yg mau :) Mau menu, Cbox, kommentar dan bla-bla :))
See you and good luck :-h
Diposting oleh di
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)