begin process at 2012 02 11 03:31:19
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > MENU TOUJOURS A LA MEME POSITION TRES FLUIDE

MENU TOUJOURS A LA MEME POSITION TRES FLUIDE


 Information sur la source

Note :
10 / 10 - par 2 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Expert Date de création :09/05/2005 Vu / téléchargé :11 810 / 1 462
Auteur : larion

Ecrire un message privé
Site perso
Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <!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>
<!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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture CHANGER DE THEME ET DE COULEUR
Source avec Zip Source avec une capture TRI DYNAMIQUE D'UN TABLEAU HTML AVEC RECONNAISSANCE AUTOMATI...
Source avec Zip Source avec une capture MENU HORIZONTAL DYNAMIQUE AVEC SOUS-MENUS AVEC FONDU
Source avec une capture MENU VERTICAL AVEC SOUS-MENUS
Source avec Zip Source avec une capture MENU HORIZONTAL ET VERTICAL
Toutes les sources de larion

 Sources de la même categorie

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de Arto_8000 le 09/05/2005 22:41:53

Il y a aussi style="position:absolute;".

Commentaire de coucou747 le 11/05/2005 17:52:19 administrateur CS

style="position:fixed;"....

Commentaire de x_mec le 20/03/2007 11:08:49

Ta bidouille est sympa, mais ce qui est moins sympa c'est que tout les element en position:absolute seront fixé eu aussi !

Commentaire de matmovies le 09/05/2007 22:10:11

ç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

Commentaire de enanda le 21/06/2007 14:33:08

Comment je pourrai exploiter votre menu horizontal car jai besoin si possible ?!

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (16 Go)
Entre 0€ et 0€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Renewable Energy is Within Reach
Photo Underwater View of the Ocean With Plants and Coral 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,451 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)