JavaSript Menu with scrolling

Here we'll look at one more menu script, its peculiarity is that it takes up little space on the page, as it only appears when you hover over it.

EXAMPLE OF WORK OF SCRIPT LOOKING HERE

Code:

<SCRIPT language=JavaScript1.2>
NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;lastY=0;sI=new Array();moving=setTimeout('null',1);

function moveOut() {if (parseInt(ssm.left)<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 (parseInt(ssm.left)>(-menuWidth)) {clearTimeout(moving);
moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){ssm.left = parseInt(ssm.left)+num;
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;
if(bssm.left+bssm.clip.right>document.width)document.width+=num}}

function makeStatic() {
winY=(IE)?document.body.scrollTop:window.pageYOffset;
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset&&winY<=YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 10)}

function buildBar() {
if(barText.toLowerCase().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+'" align=center><font style="'+barFontstyle+'"><B>'+tempBar+'</B></font></td>')}

function initSlide() {
if (NS6||IE){ssm=(NS6)?document.getElementById("thessm"):document.all("thessm");
bssm=(NS6)?document.getElementById("basessm").style:document.all("basessm").style;
bssm.clip="rect(0 "+ssm.offsetWidth+" "+(((IE)?document.body.clientHeight:0)+ssm.offsetHeight)+" 0)";
bssm.visibility="visible";ssm=ssm.style;if(NS6)bssm.top=YOffset}
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+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0px ;Z-Index : 21;'+((IE)?"width:1px":"")+'" 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)+'" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">');
for(i=0;i<sI.length;i++) {
if(!sI[i][3]){sI[i][3]=menuCols;sI[i][5]=menuWidth-1}
else if(sI[i][3]!=menuCols)sI[i][5]=Math.round(menuWidth*(sI[i][3]/menuCols)-1);
if(sI[i-1]&&sI[i-1][4]!="no"){document.write('<TR>')}
if(!sI[i][1]){
document.write('<TD BGCOLOR="'+hdrBGColor+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+sI[i][5]+'" COLSPAN="'+sI[i][3]+'" style="'+hdrFontstyle+'"><b>&nbsp;'+sI[i][0]+'</TD>')}
else {if(!sI[i][2])sI[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+sI[i][5]+'" HEIGHT="'+hdrHeight+'" COLSPAN="'+sI[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="/click?http://'+sI[i][1]+'" target="'+sI[i][2]+'" CLASS="ssmItems">'+sI[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(sI[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
if(sI[i][4]!="no"){document.write('</TR>')}}
document.write('</table>')
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>');setTimeout('initSlide();', 1)}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}}

function addHdr(name, cols, endrow){sI[sI.length]=[name, '', '', cols, endrow]}

function addItem(name, link, target, cols, endrow){if(!link)link="javascript://";sI[sI.length]=[name, link, target, cols, endrow]}


YOffset=100;
staticYOffset=20;
XOffset=1;
slideSpeed=10;
waitTime=200;
menuBGColor="#375A68";
menuIsStatic="yes";
menuWidth=100;
menuCols=3;
hdrBGColor="#66CCCC";
hdrFontstyle="color: #112222; font-family: verdana, arial, sans-serif; font-size:13px";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="18";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="#CCCC99";
linkOverBGColor="#BDC6E0";
linkTarget="_top";
linkAlign="left";
barBGColor="#CCCC99";
barFontstyle="color:#112222; font-family: verdana, arial, sans-serif; font-size:13px"
barVAlign="center";
barWidth=18;
barText='m e n u'; // <IMG> tag supported: '<img src="some.gif" border=0>'


addHdr('заголовок:');
addItem('ссылка 1', 'http://www.shram.kiev.ua', '+');
addItem('ссылка 2', 'http://www.shram.kiev.ua', '+');
addItem('ссылка 3', 'http://www.shram.kiev.ua', '+');
addHdr('заголовок:');
addItem('ссылка 4', 'http://www.shram.kiev.ua', '+');
addItem('ссылка 5', 'http://www.shram.kiev.ua', '+');
addItem('ссылка 6', 'http://www.shram.kiev.ua', '+');

buildMenu();
//-->
</SCRIPT>


The script is large enough (about 6 Kb), but to configure the menu you will only need the last block of its code, in which you can change any parameter:

YOffset = 100; Output coordinate from the top edge
StaticYOffset = 100; Coordinate of output from the top edge in statics
XOffset = 1; Coordinate of output from the left edge
SlideSpeed ​​= 10; Page slip speed (menuIsStatic = "yes")
WaitTime = 200; Opening-closing time
MenuBGColor = "# 375A68" the color of the menu frame
MenuIsStatic = "yes" if you specify "no" then the menu will not move on the page
MenuWidth = 100; Menu width
MenuCols = 3; Frame size
HdrBGColor = "# 66CCCC" background , color and title font
HdrFontstyle = "color: # 112222; font-family: verdana, arial, sans-serif; font-size: 13px"
HdrAlign = "left" header text alignment
HdrVAlign = "center"
HdrHeight = "18" header height
LinkFontFamily = "Verdana" font of links
LinkFontSize = "2" font size of links
LinkBGColor = "# CCCC99" link background color
LinkOverBGColor = "# BDC6E0" link background color for hover
LinkTarget = "_ top" link opens in a new window
LinkAlign = "left" link text alignment
BarBGColor = "# CCCC99" background color and bar bar font menu
BarFontstyle = "color: # 112222; font-family: verdana, arial, sans-serif; font-size: 13px"
BarVAlign = "center" alignment of the bar text menu
BarWidth = 18; Bar width menu
BarText = 'men u'; Menu bar text
'<Img src = "bar.gif" border = 0>' to display the picture instead of the bar text, you can insert

Next comes the standard block of names and addresses of links:
AddHdr ('header:');
AddItem ('link 1', 'http: // adress', '+');
AddItem ('link 2', 'http: // adress', '+');
AddItem ('link 3', 'http: // adress', '+');
AddHdr ('header:');
AddItem ('link 4', 'http: // ..', '+');
AddItem ('link 5', 'http: // ..', '+');
AddItem ('link 6', 'http: // ..', '+');