Menu toujours a la meme position tres fluide

Soyez le premier à donner votre avis sur cette source.

Vue 13 555 fois - Téléchargée 1 562 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
cs_enanda Messages postés 12 Date d'inscription samedi 2 septembre 2006 Statut Membre Dernière intervention 12 avril 2008
21 juin 2007 à 14:33
Comment je pourrai exploiter votre menu horizontal car jai besoin si possible ?!
matmovies Messages postés 1 Date d'inscription mardi 21 mars 2006 Statut Membre Dernière intervention 9 mai 2007
9 mai 2007 à 22:10
ç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
cs_x_mec Messages postés 63 Date d'inscription mercredi 25 août 2004 Statut Membre Dernière intervention 19 février 2008
20 mars 2007 à 11:08
Ta bidouille est sympa, mais ce qui est moins sympa c'est que tout les element en position:absolute seront fixé eu aussi !
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 43
11 mai 2005 à 17:52
style="position:fixed;"....
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
9 mai 2005 à 22:41
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.