Comment rendre flottant un menu.

**fmoriet** · 06/10/2004, 13h40

Mon menu est en javascript mais fixe en haut de la page et je voudrais le rendre toujours apparent sur la page même avec déplacement de l'ascenseur.

Merci de me tuyauter à ce sujet et savoir si c'est possible dans mon cas.
Site : http://touraine2cvclub.free.fr/

**SpaceFrog** · 06/10/2004, 13h43

en le mettant dans un div dont tu gères le top sur le onscroll de la page...

voici la partie du code qui gère la position sur le scroll:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script language="JavaScript">
function stayupthere()
{document.getElementById('MyDiv').style.pixelTop = document.body.scrollTop +10}
</script>
 
 
// Config la suivie du défilement : 
var suivre_le_scroll=true; 
 
// Test navigateur 
var agt = navigator.userAgent.toLowerCase(); 
var isOpera = (agt.indexOf("opera") != -1); 
var isIE = (agt.indexOf("msie") != -1) && !isOpera; 
 
 
// onScroll pour Internet Explorer, le position:fixed fait ce boulot pour les autres navigateurs 
// qui respectent les normes CSS... 
window.onscroll = function() 
{ 
   if (suivre_le_scroll && isIE) 
   { 
      document.getElementById("tondivglobal").style.top = document.body.scrollTop + "5px"; //Modifie la position haute 
   } 
} 
 
 
with(document.getElementById("tondivglobal").style) { 
   if (!suivre_le_scroll || isIE) 
      position="absolute"; 
   else position="fixed"; 
}

**fmoriet** · 06/10/2004, 13h56

Merci mais comme je début, dans quel fichier je mets tout ça. A moins qu'il faille tronçonner un peu tout ça. Je penses que ça va plutôt dans une page dans la partie head. Mais ça pourrait peut être aller dans un menu.js ?

Merci

**SpaceFrog** · 06/10/2004, 14h02

si tu as un fichier js délocalisé tu le mets dans ton fichier js, sinon tu peux le mettre dans le head de la page concernée...

à noter que ton menu devra être placé dan un div avec un id MyDiv ...

**fmoriet** · 07/10/2004, 08h43

Ca ne fonctionne pas ....
Quel est la différence entre MyDiv et tondivglobal ? Dans mon cas, j'ai mis la même chose.
On est d'accord que la balise div est appliqué à la partie du script qui est dans la balise body ? Est-ce bien ça ?

Merci

**javatwister** · 07/10/2004, 10h33

soluce sans js: http://javatwist.imingo.net/menufixe.htm

(Moz, IE, Ffx)

seules les trois premières lignes de css sont cruciales

**SpaceFrog** · 07/10/2004, 11h24

sinon y'avait aussi ça sans js ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
<title>Mon bouton mouvant</title>
<style type="text/css">
body{overflow:hidden;margin:0px;}
#menu 	{position:absolute;
			 bottom:0px;
			 left:0px;
			 width:200px;
			 border : solid 1px green;
			 text-align:center;
			 ;}
</style>
</head>
 
<body>
 
<div id="menu">
TITRE 1<br/>
sous titre 1.1<br/>
sous titre 1.2<br/>
<br/>
TITRE 2<br/>
sous titre 2.1<br/>
sous titre 2.1<br/>
</div>
 
<div id="cont" style="width:100%; height:100%; overflow:auto;">
 
<div style="height:1200px;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mon beau Site</h1>
<p>Amusez vous à défiler la page.</p>
</div>
 
</div>
 
</body>
</html>

**fmoriet** · 07/10/2004, 11h37

Merci mais je ne compte pas revoir mon menu, j'y ai passé assez de temps comme ça. Donc je compte faire avec .... Qu'est ce qui pourrait faire que ça ne fonctionne pas et pouvez vous répondre à mes dernières questions, la réponse est peut être la dedans ;;;;;

Merci

**SpaceFrog** · 07/10/2004, 11h42

personne ne te demande de refaire ton menu, il suffit de l'insérer dans la zone qui ne bouge pas dans les exemples donnés !!!

**javatwister** · 07/10/2004, 11h56

T'énerve pas SF

c'est la nouvelle tendance sur ce forum: t'expliques un truc et la personne qui a posé la question te révèle qu'en fait elle cherche un tutorial html...

Comment rendre flottant un menu.

JavaScript

Discussions similaires

Partager

Partager