Menu scroll au top mise à jour

Soyez le premier à donner votre avis sur cette source.

Snippet vu 17 931 fois - Téléchargée 26 fois

Contenu du snippet

Mise à jour du menu. IE5.5 ou 6 necessaires. Marche pas Mozilla Netscape7.

Menu qui reste au top à gauche quand on scrolle en bas ou à droite.Encadré sur fond bleu, qui apparait/disparait quand on clique sur l'écran. Une variable sert à ça. Peut passer à droite, revenir à gauche.
En cas de scroll le menu reste à gauche ou à droite.
La pos de droite dépend de la déf d'écran.
Les param de dim (larg/hauteur du menu) sont à entrer dans le script.
Les déf css des liens sont entrés en deux classes qui s'inversent automatiquement quand la souris passe dessus.
Ajout en plus aujourd'hui d'un chgmt de la couleur de bordure de menu quand on passe sur les liens de renvoi qui sont à l'intérieur. Chacun le sien...
Fonction document.styleSheets[0].rules[0].style.borderColor, donne accès ici au 1er elem de la 1ere table de css pour changer le style.
Et c'est toujours du javascript + dynamic html/css.

Source / Exemple :


<HTML> 
<HEAD> 
<SCRIPT type="text/javascript">
var largecran = screen.width;
var largmenu = 200;
var hautmenu = 150;
<!------ menu à droite def d'ecran - la largeur - 30 px du bord --------->
posdroite = largecran - largmenu - 30;
<!------- var de test tst evite de sup le menu quand on clique dessus (=clique body)--------->
<!-----	onchg teste menu present ou non, drtchg s'il est à droite ------------>
var tst = true;
var onchg = 1;
var drtgch = 1;

function adroite() {
drtgch = 2;
ReplaceMenu();
}

function ReplaceMenu() 
{ 
var offsetInfo = "" 
var X = document.body.scrollLeft; 
var Y = document.body.scrollTop;
if (drtgch == 1) {
	menu.style.pixelLeft=X; 
	}
else {
	menu.style.pixelLeft=posdroite;
	}
menu.style.pixelTop=Y; 
} 

function change() {

if (tst == true)
	{ if( onchg == 1)
		{
		menu.style.display='none';
		onchg = 2;
		}
	else 	{
		menu.style.display='inline';
		onchg = 1;
		}
	}
}
document.write("<style ID='ST1' type='text/css'>");
document.write("#menu {position:absolute; top:0px; left:0px;padding:4px;background-color:#CFE6EE;width:"+ largmenu +"px;height:"+ hautmenu +"px;border: blue 8px solid; font-size: 14px; color: violet;}");
document.write("</style>");
</script>
<style ID='ST2' type="text/css">
#tab {width : 900px;}
p.lien1 {margin:2 2 2 0; border:2px darkred groove; color: blue; font-family:Arial, sans-serif;font-size:12px;}
p.lien1actif {margin:2 2 2 0; border:2px darkblue outset; color: red; background-color: yellow; font-family:Arial, sans-serif;font-size:12px;}
a.lien:link {
	font-weight: 300;
	text-decoration: underline;
	width: 100%;
	}
a.lien:active {
	text-decoration: underline;
	font-weight: 700;
	}
a.lien:visited {
	font-weight : 300;
	text-decoration: none;
	}
a.lien:hover {
	color: red;
	}
</style>
</HEAD> 
<BODY style="cursor:hand" onClick="change();tst=true;" onscroll="ReplaceMenu();">
<DIV ID="menu" onClick="tst=false;"> 
<p style="color: red;border-bottom: blue 4px solid;">Menu - <span style="font-size:10px"><a href="#" onClick="adroite();return false">A droite</a> - <a href="#" onClick="Javascript:drtgch=1;ReplaceMenu();return false;">A gauche</a></span></p>

<!------document.styleSheets[0].rules[0].style.borderStyle='Outset';document.styleSheets[0].rules[0] : represente le premier element de la premiere table de style.------->
<p class="lien1" onmouseOver="this.className='lien1actif';document.styleSheets[0].rules[0].style.borderColor='darkred';document.styleSheets[0].rules[0].style.borderStyle='Outset';" onmouseOut="this.className='lien1';document.styleSheets[0].rules[0].style.borderColor='blue';document.styleSheets[0].rules[0].style.borderStyle='solid';"><a class="lien" href="http://www.fr.yahoo.com">Yahoo</a></p>
<p class="lien1" onmouseOver="this.className='lien1actif';document.styleSheets[0].rules[0].style.borderColor='darkgreen';document.styleSheets[0].rules[0].style.borderStyle='Outset';" onmouseOut="this.className='lien1';document.styleSheets[0].rules[0].style.borderColor='blue';document.styleSheets[0].rules[0].style.borderStyle='solid';"><a class="lien" href="http://www.altavista.fr">Alta vista</a></p>
</DIV>
<table id="tab">
<tr>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
</tr>
<tr>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
</tr>
</table>
	<p>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
</p>
</BODY> 
</HTML>

Conclusion :


de 57 lignes on est passé à 95.
soit 75 lignes de prog et menu.

Allez voir là :
<http://msdn.microsoft.com/library/default.asp?>

a+

A voir également

Ajouter un commentaire

Commentaires

gostsn
Messages postés
22
Date d'inscription
lundi 23 mai 2005
Statut
Membre
Dernière intervention
6 mars 2011

Et la compatibilité avec les différent navigateur???????
script donc inutile 0/10
Mprog
Messages postés
11
Date d'inscription
dimanche 23 février 2003
Statut
Membre
Dernière intervention
30 septembre 2009

a j'allais oublier il marche quand on utilise la scroll bar pas quand on utilise la mollette pour palier ce problemme je propose un seTimeout voila j'espere que j'ais rien oublié cette fois @++
Mprog
Messages postés
11
Date d'inscription
dimanche 23 février 2003
Statut
Membre
Dernière intervention
30 septembre 2009

bon ya les couleur du menu qui ne change pas comme sur IE mais j'ais fait cela en 10 min :D

et j'ais la flemme d'installer netscape ;)
Mprog
Messages postés
11
Date d'inscription
dimanche 23 février 2003
Statut
Membre
Dernière intervention
30 septembre 2009

<HTML>
<HEAD>
<script type="text/javascript">
var largecran = screen.width;
var largmenu = 200;
var hautmenu = 150;
<!------ menu à droite def d'ecran - la largeur - 30 px du bord --------->
if (navigator.appVersion.indexOf("MSIE") !-1) {posdroite largecran - largmenu - 30;} else {posdroite = largecran - largmenu - 39;}
<!------- var de test tst evite de sup le menu quand on clique dessus (=clique body)--------->
<!----- onchg teste menu present ou non, drtchg s'il est à droite ------------>
var tst = true;
var onchg = 1;
var drtgch = 1;

function adroite() {
drtgch = 2;
ReplaceMenu();
}

function ReplaceMenu()
{
var offsetInfo = ""
var X = document.body.scrollLeft;
var Y = document.body.scrollTop;
//alert("sdfdsf");
if (drtgch == 1) {
document.getElementById("menu").style.left=X;
}
else {
document.getElementById("menu").style.left=posdroite;
}
document.getElementById("menu").style.top=Y;
//--------------correction bug mozilla sur le scrolling
//setTimeout("ReplaceMenu()","100");

}


function change() {
if (tst == true)
{ if( onchg == 1)
{
document.getElementById("menu").style.display='none';
onchg = 2;
}
else {
document.getElementById("menu").style.display='inline';
onchg = 1;
}
}
}

document.write("<style ID='ST1' type='text/css'>");
document.write("#menu {position:absolute; top:0px; left:0px;padding:4px;background-color:#CFE6EE;width:"+ largmenu +"px;height:"+ hautmenu +"px;border: blue 8px solid; font-size: 14px; color: violet;}");
document.write("</style>");
//-------------correction bug mozilla sur le scrolling
//setTimeout("ReplaceMenu()","100");
</script>
<style ID='ST2' type="text/css">
#tab {width : 900px;}
p.lien1 {margin:2 2 2 0; border:2px darkred groove; color: blue; font-family:Arial, sans-serif;font-size:12px;}
p.lien1actif {margin:2 2 2 0; border:2px darkblue outset; color: red; background-color: yellow; font-family:Arial, sans-serif;font-size:12px;}
a.lien:link {
font-weight: 300;
text-decoration: underline;
width: 100%;
}
a.lien:active {
text-decoration: underline;
font-weight: 700;
}
a.lien:visited {
font-weight : 300;
text-decoration: none;
}
a.lien:hover {
color: red;
}
</style>
</HEAD>



Menu - [# A droite] - [# A gauche]



<!------document.styleSheets[0].rules[0].style.borderStyle='Outset';document.styleSheets[0].rules[0] : represente le premier element de la premiere table de style.------->






ton texte-ton texte-ton texte-ton texte-ton texte,
ton texte-ton texte-ton texte-ton texte-ton texte,
ton texte-ton texte-ton texte-ton texte-ton texte,

----

ton texte-ton texte-ton texte-ton texte-ton texte,
ton texte-ton texte-ton texte-ton texte-ton texte,
ton texte-ton texte-ton texte-ton texte-ton texte

ton texte
ton texte
ton texte
ton texte
ton texte
ton texte

ton texte
ton texte
ton texte
ton texte
ton texte
ton texte
ton texte

ton texte
ton texte
ton texte
ton texte
ton texte
ton texte
ton texte

ton texte
ton texte
ton texte
ton texte
ton texte
ton texte
ton texte

ton texte
ton texte
ton texte
ton texte
ton texte
ton texte
ton texte

[www.yahoo.fr yahoo le retour]



</HTML>




-----------------------------------------------------------------------------
marche sur mozilla 1.5 essayez le sur netscape ;)
cs_Deny
Messages postés
39
Date d'inscription
lundi 21 octobre 2002
Statut
Membre
Dernière intervention
16 février 2009

Note au utilisateurs :
Si vous prenez ce script, faites gaffe de pas vous planter. Par exemple au test avec la var tst, parce que s'il elle mal gèrée quand vous cliquez sur le menu, alors vous cliquez sur le body et vous faites disparaitre le menu !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.