Membuat Floating Menu

0

Sebetulnya ciebal gak begitu paham tentang arti secara ilmiahnya, yang jelas Floating Menu yang ciebal bahas adalah menu yang melayang mengikuti scroll mouse. Jadi pada blog kita akan ada menu baru disebelah kiri yang melayang mengikuti scroll mouse.

Demo : https://www.ciebal.com/demo/floating.html

Caranya sangat mudah, yaitu :
1. Buat dua buah file dengan nama floating1.js dan floating2.js
Source file floating1.js
//Static Slide Menu 6.5 © MaXimuS 2000-2001, All Rights Reserved.
//Site: http://www.absolutegb.com/maximus
//Script featured on Dynamic Drive (http://www.dynamicdrive.com)
NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar=”;barBuilt=0;ssmItems=new Array();

function truebody(){
return (document.compatMode!=”BackCompat”)? document.documentElement : document.body
}

moving=setTimeout(‘null’,1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout(‘moveOut()’, slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout(‘null’,1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout(‘moveBack1()’, waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout(‘moveBack1()’, slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout(‘null’,1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS6) {ssm.left = parseInt(ssm.left)+num+”px”;}
if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = truebody().scrollTop;}
if (NS6||IE||NS) {
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY – lastY – YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
smooth = .2 * (winY – lastY – (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) bssm.pixelTop+=smooth;
if (NS6) bssm.top=parseInt(bssm.top)+smooth+”px”
if (NS) bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout(‘makeStatic()’, 1)}}

function buildBar() {
if(barText.indexOf(‘<IMG’)>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+”<BR>”}}
document.write(‘<td align=”center” rowspan=”100″ width=”‘+barWidth+'” bgcolor=”‘+barBGColor+'” valign=”‘+barVAlign+'”><p align=”center”><font face=”‘+barFontFamily+'” Size=”‘+barFontSize+'” COLOR=”‘+barFontColor+'”><B>’+tempBar+'</B></font></p></TD>’)}

function initSlide() {
if (NS6){ssm=document.getElementById(“thessm”).style;bssm=document.getElementById(“basessm”).style;
bssm.clip=”rect(0 “+document.getElementById(“thessm”).offsetWidth+” “+document.getElementById(“thessm”).offsetHeight+” 0)”;ssm.visibility=”visible”;}
else if (IE) {ssm=document.all(“thessm”).style;bssm=document.all(“basessm”).style
bssm.clip=”rect(0 “+thessm.offsetWidth+” “+thessm.offsetHeight+” 0)”;bssm.visibility = “visible”;}
else if (NS) {bssm=document.layers[“basessm1”];
bssm2=bssm.document.layers[“basessm2”];ssm=bssm2.document.layers[“thessm”];
bssm2.clip.left=0;ssm.visibility = “show”;}
if (menuIsStatic==”yes”) makeStatic();}

function buildMenu() {
if (IE||NS6) {document.write(‘<DIV ID=”basessm” style=”visibility:hidden;Position : Absolute ;Left : ‘+XOffset+’px ;Top : ‘+YOffset+’px ;Z-Index : 20;width:’+(menuWidth+barWidth+10)+’px”><DIV ID=”thessm” style=”Position : Absolute ;Left : ‘+(-menuWidth)+’px ;Top : 0 ;Z-Index : 20;” onmouseover=”moveOut()” onmouseout=”moveBack()”>’)}
if (NS) {document.write(‘<LAYER name=”basessm1″ top=”‘+YOffset+'” LEFT=’+XOffset+’ visibility=”show”><ILAYER name=”basessm2″><LAYER visibility=”hide” name=”thessm” bgcolor=”‘+menuBGColor+'” left=”‘+(-menuWidth)+'” onmouseover=”moveOut()” onmouseout=”moveBack()”>’)}
if (NS6){document.write(‘<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”‘+(menuWidth+barWidth+2)+’px” bgcolor=”‘+menuBGColor+'”><TR><TD>’)}
document.write(‘<table border=”0″ cellpadding=”0″ cellspacing=”1″ width=”‘+(menuWidth+barWidth+2)+’px” bgcolor=”‘+menuBGColor+'”>’);
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}
else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if(ssmItems[i-1]&&ssmItems[i-1][4]!=”no”){document.write(‘<TR>’)}
if(!ssmItems[i][1]){
document.write(‘<td bgcolor=”‘+hdrBGColor+'” HEIGHT=”‘+hdrHeight+’px” ALIGN=”‘+hdrAlign+'” VALIGN=”‘+hdrVAlign+'” WIDTH=”‘+ssmItems[i][5]+'” COLSPAN=”‘+ssmItems[i][3]+'”>&nbsp;<font face=”‘+hdrFontFamily+'” Size=”‘+hdrFontSize+'” COLOR=”‘+hdrFontColor+'”><b>’+ssmItems[i][0]+'</b></font></td>’)}
else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;
document.write(‘<TD BGCOLOR=”‘+linkBGColor+'” onmouseover=”bgColor=”+linkOverBGColor+”” onmouseout=”bgColor=”+linkBGColor+”” WIDTH=”‘+ssmItems[i][5]+’px” COLSPAN=”‘+ssmItems[i][3]+'”><ILAYER><LAYER onmouseover=”bgColor=”+linkOverBGColor+”” onmouseout=”bgColor=”+linkBGColor+”” WIDTH=”100%” ALIGN=”‘+linkAlign+'”><DIV ALIGN=”‘+linkAlign+'”><FONT face=”‘+linkFontFamily+'” Size=”‘+linkFontSize+'”>&nbsp;<A HREF=”‘+ssmItems[i][1]+'” target=”‘+ssmItems[i][2]+'” CLASS=”ssmItems”>’+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>’)}
if(ssmItems[i][4]!=”no”&&barBuilt==0){buildBar();barBuilt=1}
if(ssmItems[i][4]!=”no”){document.write(‘</TR>’)}}
document.write(‘</table>’)
if (NS6){document.write(‘</TD></TR></TABLE>’)}
if (IE||NS6) {document.write(‘</DIV></DIV>’)}
if (NS) {document.write(‘</LAYER></ILAYER></LAYER>’)}
theleft=-menuWidth;lastY=0;setTimeout(‘initSlide();’, 1)}

Sorce file floating2.js

YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor=”red”;
menuIsStatic=”yes”;
menuWidth=150;
menuCols=2;
hdrFontFamily=”verdana”;
hdrFontSize=”2″;
hdrFontColor=”black”;
hdrBGColor=”#FF0000″;
hdrAlign=”left”;
hdrVAlign=”center”;
hdrHeight=”15″;
linkFontFamily=”Verdana”;
linkFontSize=”2″;
linkBGColor=”white”;
linkOverBGColor=”#FFFF99″;
linkTarget=”_top”;
linkAlign=”Left”;
barBGColor=”red”;
barFontFamily=”Verdana”;
barFontSize=”2″;
barFontColor=”white”;
barVAlign=”center”;
barWidth=20; // no quotes!!
barText=”WELCOME”; // dapat menggunakan tag <IMG>, silahkan gunakan code html

// —– Mulai Edit Menu
ssmItems[0]=[“Ciebal’s Menu”] //Header Menu
ssmItems[1]=[“Home”, “/”, “”]
ssmItems[2]=[“About Me”, “/about-me/”,””]
ssmItems[3]=[“Download”, “https://www.ciebal.com/download”, “”]
ssmItems[4]=[“FaceBook”, “http://www.facebook.com/”, “_new”]
ssmItems[5]=[“IndoBlogger”, “http://indoblogger.or.id”, “_new”]
ssmItems[6]=[“Add Ons”, “https://www.ciebal.com/add-ons”, “”]
ssmItems[7]=[“Donasi”, “https://www.ciebal.com/donasi”, “”]

buildMenu();
//—– Selesai Edit Menu
2. Setelah selesai membuat file, kamu upload script ini dihosting kamu, bisa juga di free hosting seperti geocities, ripway, fileave, dll.
3. Setelah upload file, kamu sisipkan code javascript di file blog/website kamu :

<script type=”text/javascript” src=”www.url-hosting-kamu/floating1.js”></script>
<script type=”text/javascript” src=”www.url-hosting-kamu/floating2.js”></script>

NB : Untuk WordPress, kamu bisa sisipkan script diatas pada file header.php, disisipkan di antara tag <head></head>

Q :Yah, klo kayak gitu sih semua orang bisa dunkz coba tolong jelaskan fungsi masing-masing scriptnya dunkz..
A : Ok, Ciebal coba menjelaskan cara mengedit script di atas. :D

File floating1.js berfungsing untuk membentuk tabel-tabel pada menu, sedangkan file floating2.js berfungsi untuk menampilkan list-list menu yang akan kita buat serta style dari warna, huruf, dll.

Untuk merubah nama floating menu itu yang kamu harus ubah adalah code :
barText=”WELCOME”; >> Pada file floating2.js Ubah sesuka hati kamu

Lalu untuk merubah menu-menu nya kamu edit script dibawah ini pada file floating2.js:

// —– Mulai Edit Menu
ssmItems[0]=[“Ciebal’s Menu”] //Header Menu
ssmItems[1]=[“Home”, “https://www.ciebal.com/”, “”]
ssmItems[2]=[“About Me”, “https://www.ciebal.com/about-me/”,””]
ssmItems[3]=[“Download”, “https://www.ciebal.com/download”, “”]
ssmItems[4]=[“FaceBook”, “http://www.facebook.com/”, “_new”]
ssmItems[5]=[“IndoBlogger”, “http://indoblogger.or.id”, “_new”]
ssmItems[6]=[“Add Ons”, “https://www.ciebal.com/add-ons”, “”]
ssmItems[7]=[“Donasi”, “https://www.ciebal.com/donasi”, “”]

buildMenu();
//—– Selesai Edit Menu

Dengan melihat scriptnya pasti kamu tau dari masing-masing code, untuk code “_new” adalah berfungsi untuk membuka link dengan Tab baru atau windows baru (fungsi ini sama dengan target=”_Blank”

Untuk warna tulisan, link, besar huruf, dll, kamu ubah isi file floating2.js, kamu bisa merubah sesuai warna blog/website kamu.. ;)

Gampang banget kan..?
m/

Leave a Reply