JavaSript Menu défilement
Ici, nous regardons un autre menu de script, sa particularité est qu'il prend peu de place sur la page, comme il apparaît uniquement lorsque vous survolez Heder.
Exemple de script REGARDEZ 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" ><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> '+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+'"> <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 Kb), mais pour personnaliser le menu seulement besoin du dernier bloc de son code, que vous pouvez modifier tout paramètre:
YOffset = 100;
coordonner la sortie depuis le bord supérieur
staticYOffset = 100;
coordonner la sortie de l'arête supérieure dans un statique
XOffset = 1;
coordonner la production du bord gauche
slideSpeed = 10;
vitesse de glissement sur la page (menuIsStatic = "yes")
waitTime = 200;
temps d'ouverture - fermeture
menuBGColor = menu de couleur "# 375A68" frame
menuIsStatic = "yes" si vous ne spécifiez pas "non" dans le menu, déplacez la page
menuWidth = 100;
largeur de menu
menuCols = 3;
taille d'image
hdrBGColor = "# 66CCCC" couleur de fond et en- tête police
hdrFontstyle = "color: # 112222; font-family: Verdana, Arial , sans-serif; font-size: 13px"
hdrAlign = alignement "gauche" du texte d' en- tête
hdrVAlign = "center"
hdrHeight = "18" en- tête de la hauteur
linkFontFamily = "Verdana" liens de police
linkFontSize = "2" liens font size
linkBGColor = "# CCCC99" couleur des liens de fond
linkOverBGColor = "# BDC6E0" couleur de fond des liens lorsque vous survolez
LinkTarget = "_ top" pour ouvrir le lien dans une nouvelle fenêtre
linkAlign = alignement "gauche" de liens de texte
barBGColor = bar "# CCCC99" de couleur de fond et le menu de la police
barFontstyle = "color: # 112222; font-family: Verdana, Arial , sans-serif; font-size: 13px"
barVAlign = "center" texte de menu de la barre d'alignement
BarWidth = 18;
la largeur de la barre de menu
barText = 'hommes u';
barre de menu de texte
'<Img src = "bar.gif" border = 0>' pour afficher une image au lieu de texte, vous pouvez insérer une barre
Vient ensuite le bloc de construction des noms et adresses de références:
addHdr ( 'header');
addItem ( «Référence 1», «http: // adresse ' ' + ',);
addItem ( 'Link 2', 'http: // adresse' , '+');
addItem ( 'Référence 3', 'http: // adresse' '+',);
addHdr ( 'header');
addItem ( «la référence 4 ',' http: // .. ' ,' + ');
addItem ( 'link 5', 'http: // ..' , '+');
addItem ( 'référence 6', 'http: // ..' , '+');
Commentaires
Commentant, gardez à l' esprit que le contenu et le ton de vos messages peuvent blesser les sentiments des gens réels, montrer du respect et de la tolérance à ses interlocuteurs, même si vous ne partagez pas leur avis, votre comportement en termes de liberté d'expression et de l' anonymat offert par Internet, est en train de changer non seulement virtuel, mais dans le monde réel. Tous les commentaires sont cachés à l'index, le contrôle anti - spam.