Menu toujours a la meme position tres fluide

Soyez le premier à donner votre avis sur cette source.

Vue 13 145 fois - Téléchargée 1 548 fois

Description

Sans effet de tremblement, ce code permet de stabiliser un objet à une position.
Ici, j'ai pris un menu pour l'exemple, mais on peut l'adapter à n'importe quoi.
Ce code est compatible IE6 et FireFox.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
body {margin:0; padding:0; border:0; height:100%; overflow-y:auto;}
#menu {display:block; top:13px; left:50%; width:500px; margin-left:-250px; position:fixed;  }

  • html #menu { position:absolute; }
</style> <!--[if IE 6]> <style> html {overflow-x:auto; overflow-y:hidden;} </style> <![endif]--> </head> <body> <br /> <script> menuhz = 1 //1:menu horizontal 0:menu vertical bgcolor ='#990000'; //Couleur arrière bgcolor2='#A7B2E9'; //Couleur arrière surbrillance bgcolor3='#6375D6'; //Couleur bordure bgcolor4='#ffffff'; //Couleur texte largeur = 100 hauteur = 22 i = 0 menup = new Array; menup[i++]='ActuFr'; menup[i++]='http://actufr.com'; menup[i++]='MultiDesk'; menup[i++]='http://multidesk.pass-x.com'; menup[i++]='Menu Hz'; menup[i++]='http://menuhorizontal.pass-x.com'; menup[i++]='JavaSriptFr'; menup[i++]='http://javascriptfr.com'; menup[i++]='Home'; menup[i++]='index.html'; document.write('<style>.ejsmenu {color:'+bgcolor4+'; cursor:hand;cursor:pointer}</style>') document.write('<DIV ID=menu><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH='+(menuhz?largeur*menup.length/2:largeur) +' HEIGHT='+hauteur+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'<tr>':'')) for(pass=0;pass<menup.length;pass+=2) document.write((menuhz?"":"<tr>")+"<TD WIDTH="+largeur+" ALIGN=center BGCOLOR="+bgcolor+" onMouseDown='location.href=\""+menup[pass+1]+"\"' onMouseOver='this.style.background=\""+bgcolor2+"\"' onMouseOut='this.style.background=\""+bgcolor+"\"' CLASS=ejsmenu><FONT SIZE=2 FACE=Verdana><B>"+menup[pass]+"</B></FONT></TD>") document.write('</tr></TABLE></TD></TR></TABLE></DIV>') </script> <br /> <H1><center><strong> <p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p> <p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p> <p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p> <p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p> </strong></center></H1> </body> </html>

Conclusion :


Garder un objet à la même position est assez simple, il suffit d'utiliser le style "position:fixed".
Tout le problème vient que ce style css ne fonctionne pas sous IE.
Il est donc possible que ce code ne fonctionne pas sous certains navigateurs.
N'ésitez pas à la faire savoir :-)

width:500px; // c'est la largeur du menu
left:50%; // centre le menu
margin-left:-250px; // la largeur du menu / 2

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
12
Date d'inscription
samedi 2 septembre 2006
Statut
Membre
Dernière intervention
12 avril 2008

Comment je pourrai exploiter votre menu horizontal car jai besoin si possible ?!
Messages postés
1
Date d'inscription
mardi 21 mars 2006
Statut
Membre
Dernière intervention
9 mai 2007

ça fait longtemps que je cherche à comprendre comment repositionner un objet en fonction du redimensionnement de la fenêtre donc le position fixed est exactement ce que je cherche... MAIS (bien sûr) est-ce normal que lorsque je mets une anim en ligne (en fullscreen), l'élement ne se positionne que lorsque je redimensionne la fenêtre manuellement, pas à l'ouverture de la page web ???
help
Messages postés
63
Date d'inscription
mercredi 25 août 2004
Statut
Membre
Dernière intervention
19 février 2008

Ta bidouille est sympa, mais ce qui est moins sympa c'est que tout les element en position:absolute seront fixé eu aussi !
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
35
style="position:fixed;"....
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
6
Il y a aussi style="position:absolute;".

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.