This page has been robot translated, sorry for typos if any. Original content here.

JavaSript Menu avec défilement

Ici, nous allons considérer un autre script de menu, sa particularité est qu'il prend peu de place sur la page, car il n'apparaît que lorsque vous passez la souris dessus.

EXEMPLE DE TRAVAIL DE SCRIPT WATCHING ICI

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" onload="initSlide()"><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>


Le script est assez grand (environ 6 Ko), mais pour configurer le menu, vous n'aurez besoin que du dernier bloc de son code, dans lequel vous pouvez changer n'importe quel paramètre:

YOffset = 100; coordonnée de sortie du bord supérieur
staticYOffset = 100; coordonnée de la sortie du bord supérieur en statique
XOffset = 1; coordonnée de la sortie du bord gauche
slideSpeed ​​= 10; vitesse de glissement de page (menuIsStatic = "yes")
waitTime = 200; heures d'ouverture et de fermeture
menuBGColor = "# 375A68" la couleur du cadre de menu
menuIsStatic = "yes" si vous spécifiez "no" alors le menu ne bougera pas sur la page
menuWidth = 100; Largeur du menu
menuCols = 3; taille de cadre
Arrière- plan, couleur et police du titre hdrBGColor = "# 66CCCC"
hdrFontstyle = "couleur: # 112222; famille de polices: verdana, arial, sans-serif, police-taille: 13px"
hdrAlign = alignement du texte de l'en-tête "left"
hdrVAlign = "centre"
hdrHeight = hauteur de la tête "18"
linkFontFamily = "Verdana" police de liens
linkFontSize = "2" taille de la police des liens
linkBGColor = "# CCCC99" lien couleur de fond
linkOverBGColor = "# BDC6E0" couleur d'arrière-plan du lien pour hover
linkTarget = "_ top" le lien s'ouvrira dans une nouvelle fenêtre
linkAlign = alignement du texte du lien "left"
barBGColor = Couleur d'arrière-plan "# CCCC99" et menu de la barre de barres
barFontstyle = "couleur: # 112222; famille de polices: verdana, arial, sans-serif, police-taille: 13px"
barVAlign = alignement "centre" du menu de texte de la barre
barWidth = 18; menu largeur de barre
barText = 'men u'; texte de la barre de menu
'<img src = "bar.gif" border = 0>' pour afficher l'image à la place du texte de la barre, vous pouvez insérer

Vient ensuite le bloc standard de noms et de liens:
addHdr ('en-tête:');
addItem ('link 1', 'http: // adresse', '+');
addItem ('link 2', 'http: // adresse', '+');
addItem ('link 3', 'http: // adresse', '+');
addHdr ('en-tête:');
addItem ('link 4', 'http: // ..', '+');
addItem ('link 5', 'http: // ..', '+');
addItem ('link 6', 'http: // ..', '+');