fLoating menu, with toggLe show hide!

by **ayeh-empty** Thu Oct 16, 2008 6:03 am

Credit's to sir irishandme

LIVE PREVIEW: MY OWN PROFILE

SCREENSHOT:<image>

Let's start on JS code...
simpLy downLoad the fiLe on Link beLow! rightcLick (save target as/ save Link as), and then upLoad the fiLe in your fiLe hosting, eg. ripway or geocities...

menu.js here

now, after that, copy the URL of your menu.js and then paste it inside the code beLow!

//fLoating menuLinks tricks
var fLoatmenutr = document.createElement("script");
fLoatmenutr.type = "text/javascript";
fLoatmenutr.src = "URL OF YOUR MENU.JS";
document.getElementsByTagName("body")[0].appendChild(fLoatmenutr);

and then, copy the code above paste it inside your JS fiLes...

now, Let's proceed inside the customizing codes....
open a new text fiLe, using notepad, and then copy the given code beLow, and then paste it...and then, edit some boLd part of the code...

//fLoating object
fLoatmenu="<div id='divStayTopLeft' style='position:absolute;z-index:50;'><div class='sdmenu'>"+
"<span class='title' id='top'><img src='http://www.geocities.com/profile_tester018/fLoatingmenuLinks/expanded.gif' class='arrow' title='click to show the content'>TITLE HERE</span>"+
"<div class='submenu'>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"</div>"+
"<span class='title' ><img src='http://www.geocities.com/profile_tester018/fLoatingmenuLinks/expanded.gif' class='arrow' title='click to show the content'>TITLE HERE</span>"+
"<div class='submenu'>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"</div>"+
"<span class='title'><img src='http://www.geocities.com/profile_tester018/fLoatingmenuLinks/expanded.gif' class='arrow' title='click to show the content'>TITLE HERE</span>"+
"<div class='submenu'>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"<a href='URL HERE' target='_blank'>NAME OF SITE</a>"+
"</div></div>";

flow=document.getElementById('flo_wrapper');
river=document.createElement("div");
river.innerHTML=fLoatmenu;
flow.parentNode.insertBefore(river,flow);

//in this part you can change it into "frombottom" or "fromtop"
var verticalpos="fromtop"

function BoyantDiv()
{
var startX = 5;
var startY = 90;
function ml(id)
{

if (document.getElementById)
{
var wek=document.getElementById(id);
}
else if (document.all)
{
var wek=document.all[id];
}
else
{
var wek=document.layers[id];
}

if(document.layers)
{
wek.style=wek;
}
wek.sP = function(x,y) {shino(x,y);};
function shino(x,y)
{
wek.style.left=x;
wek.style.top=y;
}
wek.x = startX;
if (verticalpos=="fromtop")
{
wek.y = startY;
}
else{
if (navigator.appName.indexOf("Netscape") != -1)
{
wek.y = pageYOffset + innerHeight;
}
else
{
wek.y = document.body.scrollTop + document.body.clientHeight;
}
wek.y -= startY;
}
return wek;
}
window.stayTopLeft = function () {boyant();};
function boyant()
{
if (verticalpos=="fromtop"){

if (navigator.appName.indexOf("Netscape") != -1)
{
var tenten = pageYOffset;
}
else
{
var tenten = document.body.scrollTop;
}

ftlObj.y += (tenten + startY - ftlObj.y)/8;
}
else{

if (navigator.appName.indexOf("Netscape") != -1)
{
var tenten = pageYOffset + innerHeight;
}
else
{
var tenten = document.body.scrollTop + document.body.clientHeight;
}
ftlObj.y += (tenten - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
wakoko=setTimeout("stayTopLeft()", 50);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
BoyantDiv();

and then, save your fiLe as fLoatingmenutr.js, and then after that upLoad your fiLe in your fiLe hosting...
copy the URL of of fLoatingmenutr.js, and then paste it inside the code beLow!

//fLoatingmenuLinksjs tricks
var fLoatingmenuLinksjs = document.createElement("script");
fLoatingmenuLinksjs.type = "text/javascript";
fLoatingmenuLinksjs.src = "URL OF YOUR FLOATINGMENUTR.JS";
document.getElementsByTagName("head")[0].appendChild(fLoatingmenuLinksjs);

sorry, i forgot this one....

paste the given code beLow inside your css fiLes...

click here for yer css

and then, you're done... hope you Like it guyz....
gudLuck...