Full version: jsB@nk » Menu » Slider-Bar Menu Script
URL: https://www.javascriptbank.com/slider-bar-menu-script.html
This custom script was originally contracted by a client, but they failed to mail the payment so here it is for free. Just "grab" the button at left and slide it down. The links will appear as the button nears them.
Full version: jsB@nk » Menu » Slider-Bar Menu Script
URL: https://www.javascriptbank.com/slider-bar-menu-script.html
<style type="text/css">body{color:#00385c;font:10pt sans-serif;padding:6 3 3 10;margin:0px;background-color:white;}a, a:link, a:active {color:#006bae;font:bold 10pt sans-serif;text-decoration:none;}a:hover {color:#000000;font:bold 10pt sans-serif;text-decoration:none;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">var Sx=10; // THE "X" POSITION OF SLIDERvar Sy=20; // THE "Y" POSITION OF SLIDERvar Sh=110; // SLIDER HEIGHTvar Sbg='#ffedcf'; // BACKGROUND COLOR OF SLIDER AREAvar burl='button.jpg'; // URL OF BUTTON GRAPHICvar bw=21; // BUTTON GRAPHIC WIDTHvar bh=20; // BUTTON GRAPHIC HEIGHT// BELOW IS THE ARRAY CONTAINING SUB-ARRAYS OF EACH LINKS ATTRIBUTES.// FORMAT: [ "hyperlink" , "HTML code" , "target frame/page" ]// ADD A SUBARRAY FOR EACH LINK. DON'T FORGET THE "," AFTER EACH EXCEPT THE LAST ONE.var SL=[ ["http://www.jsbank.beplaced.com/index.html" , "Javascript Bank" , "" ],["#" , "DynamicDrive" , "" ],["http://www.jsbank.beplaced.com/" , "JavaScript Source" , "" ]]/****************** DO NOT EDIT BEYOND THIS POINT ****************/var w3c=(document.getElementById)?true:false;var ns4=(document.layers)?true:false;var ie5=(document.all && w3c)?true:false;var ie4=(document.all && !w3c)?true:false;var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;var isDrag=false;var sliderButton;var yo=0;var lids=new Array();lids.spc=Sh/SL.length+5;lids.yc=new Array();var t='';t+=(ns4)?'<layer top='+Sy+' left='+Sx+' height='+Sh+' width='+(bw+2)+' bgcolor=black>':'<div style="position:absolute; top:'+Sy+'px; left:'+Sx+'px; height:'+Sh+'px; width:'+(bw+2)+'px; background-color:black;">';//t+='<table cellpadding=0 cellspacing=0 border=1 height='+Sh+' width='+(bw+2)+' '+((ns4)?'bordercolor="black"' : 'style="border-style:solid; border-color:black"')+'><tr><td></td></tr></table>';t+=(ns4)?'<layer height='+(Sh-2)+' width='+bw+' left=1 top=1 bgcolor="'+Sbg+'"></layer>':'<div style="position:absolute; height:'+(Sh-2)+'px; width:'+bw+'px; top:1px; left:1px; background-color:'+Sbg+'"></div>';t+=(ns4)?'<layer top='+(bh/2)+' left='+(bw/2+1)+' height='+(Sh-bh)+' width=1 bgcolor=black></layer>':'<div style="position:absolute; top:'+(bh/2)+'px; left:'+(bw/2+1)+'px; height:'+(Sh-bh)+'px; width:1px; background-color:black"></div>';t+=(ns4)?'<layer name="sliderB" top=1 left=1 height='+bh+' width='+bw+'>':'<div id="sliderB" style="position:absolute; top:1px; left:1px; height:'+bh+'px; width:'+bw+'px; cursor:hand">';t+='<img src="'+burl+'" width='+bw+' height='+bh+'>';t+=(ns4)?'</layer></layer>':'</div></div>';for(i=0;i<SL.length;i++){lids.yc[i]=5+Sy+(i*lids.spc);t+=(ns4)?'<layer name="Lnk_'+i+'" top='+lids.yc[i]+' left='+(bw+6+Sx)+' visibility="hidden">':'<div id="Lnk_'+i+'" style="position:absolute; top:'+lids.yc[i]+'px; left:'+(bw+6+Sx)+'px; visibility:hidden">';t+='<a href="'+SL[i][0]+'" target="'+SL[i][2]+'">'+SL[i][1]+'</a>';t+=(ns4)?'</layer>':'</div>';}document.write(t);function checklinks(){var y;for(i=0;i<lids.length;i++){y=(ns4)?sliderButton.top:parseInt(sliderButton.style.top);y2=lids.yc[i]-Sy;if((y>y2-bh) && (y<y2+bh)) (ns4)?lids[i].visibility="show":lids[i].style.visibility="visible";else (ns4)?lids[i].visibility="hide":lids[i].style.visibility="hidden";}}function getid(id){if(ns4) return findlayer(id,document);else if(ie4)return document.all[id];else return document.getElementById(id);}// FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALLfunction findlayer(name,doc){var i,layer;for(i=0;i<doc.layers.length;i++){layer=doc.layers[i];if(layer.name==name)return layer;if(layer.document.layers.length>0)if((layer=findlayer(name,layer.document))!=null)return layer;}return null;}function trackMouse(e){if(isDrag){var y=(ie4||ie5)?event.clientY+document.body.scrollTop:e.pageY;y=Math.max(1,Math.min(y-yo,Sh-bh-1));if(ns4)sliderButton.top=y;else sliderButton.style.top=y+'px';}// ADD OTHER MOUSEMOVE EVENT HANDLER COMMAND(S) HERE...return false;}function dragInit(e){isDrag=true;var ty=(ns4)? sliderButton.top : parseInt(sliderButton.style.top);yo=((ie4||ie5)?event.clientY+document.body.scrollTop:e.pageY)-ty;return false;}function SBinit(){sliderButton=getid('sliderB');for(i=0;i<SL.length;i++)lids[i]=getid('Lnk_'+i);if(ns4){sliderButton.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);document.captureEvents(Event.MOUSEMOVE);}sliderButton.onmousedown=dragInit;if(ns6)document.onmouseup=function(){isDrag=false;// IF ANOTHER SCRIPT NEEDS TO CAPTURE THE MOUSEUP EVENT, ADD THE COMMAND(S) HERE...}else sliderButton.onmouseup=new Function("isDrag=false");// IF ANOTHER SCRIPT NEEDS TO CAPTURE THE MOUSEMOVE EVENT, SEE THE trackmouse() FUNCTION. document.onmousemove=trackMouse;setInterval('checklinks()',100);}window.onresize=function(){if(ns4)setTimeout('history.go(0)',300);}window.onload=SBinit;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/menu/button.jpg