JavaSript Menü blättern

Hier sind wir auf einem anderen Skript Menü betrachten, dessen Besonderheit ist, dass es wenig Platz auf der Seite einnimmt, wie es erscheint nur, wenn Sie über sie Heder schweben.

Beispiel für das Skript LOOK HIER

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>


Das Skript ist ziemlich groß (ca. 6 Kb), aber das Menü nur noch den letzten Block des Codes anpassen, die Sie jeden Parameter ändern können:

YOffset = 100; Koordinatenausgabe von der Oberkante
staticYOffset = 100; Koordinatenausgabe von der oberen Kante in einem statischen
XOffset = 1; Koordinatenausgang von der linken Kante
slideSpeed = 10; Gleitgeschwindigkeit auf der Seite (menuIsStatic = "yes")
waittime = 200; Öffnungszeit - Schließen
menuBGColor = "# 375A68" Rahmenfarbe Menü
menuIsStatic = "yes" , wenn Sie nicht angeben , "nein" auf der Speisekarte, die Seite zu wechseln
menuWidth = 100; Menü Breite
menuCols = 3; Rahmengröße
hdrBGColor = "# 66CCCC" Hintergrundfarbe und Schriftkopf
hdrFontstyle = "color: # 112222; font-family: verdana, arial , sans-serif; font-size: 13px"
hdrAlign = "left" Ausrichtung des Kopftext
hdrVAlign = "center"
hdrHeight = "18" height Kopf
linkFontFamily = "Verdana" font Links
linkFontSize = "2" Links Schriftgröße
linkBGColor = "# CCCC99" Hintergrundfarbe von Links
linkOverBGColor = "# BDC6E0" Hintergrundfarbe von Links , wenn Sie schweben
Linktarget = "_ top" zu öffnen Sie den Link in einem neuen Fenster
linkAlign = "left" Ausrichtung von Textlinks
barBGColor = "# CCCC99" Hintergrundfarbe und Schriftmenüleiste
barFontstyle = "color: # 112222; font-family: verdana, arial , sans-serif; font-size: 13px"
barVAlign = "center" Textausrichtung Barkarte
BarWidth = 18; die Breite der Barkarte
barText = 'Männer u'; Text-Menüleiste
'<Img src = "bar.gif" border = 0>' um ein Bild anzuzeigen anstelle von Text, können Sie eine Bar einfügen

Als nächstes ist der Baustein der Namen und Adressen der Referenzen:
addHdr ( 'header');
addItem ( "Reference 1 ',' http: // Adresse ' ,' + ');
addItem ( 'Link 2', 'http: // Adresse' , '+');
addItem ( "Reference 3 ',' http: // Adresse ' ,' + ');
addHdr ( 'header');
addItem ( "Referenz 4", "http: // .. ' ,' + ');
addItem ( 'link 5', 'http: // ..' , '+');
addItem ( "Referenz 6 ',' http: // .. ' ,' + ');