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+
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.