Menu vertical fixe

**batmat86** · 28/12/2005, 22h51

Bonsoir, alors me revoilà sur ce forum avec de nouveau un petit soucis en programmation

J'ai passé tout mon après midi à me faire un menu javacript pour un site professionnel qui est en cours, donc voilà le résultat : http://batmat86.free.fr/Site%20PC%20...ormateurs.html

Le hic c'est lorsque l'on descends l'ascenseur pour pouvoir lire le bas de page, on ne vois plus le menu

Mon code :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
	var NoOffFirstLineMenus=6;			// Number of first level items
	var LowBgColor='white';			// Background color when mouse is not over
	var LowSubBgColor='white';			// Background color when mouse is not over on subs
	var HighBgColor='red';			// Background color when mouse is over
	var HighSubBgColor='black';			// Background color when mouse is over on subs
	var FontLowColor='red';			// Font color when mouse is not over
	var FontSubLowColor='black';			// Font color subs when mouse is not over
	var FontHighColor='white';			// Font color when mouse is over
	var FontSubHighColor='white';			// Font color subs when mouse is over
	var BorderColor='black';			// Border color
	var BorderSubColor='black';			// Border color for subs
	var BorderWidth=1;				// Border width
	var BorderBtwnElmnts=1;			// Border between elements 1 or 0
	var FontFamily="arial,comic sans ms,technical"	// Font family menu items
	var FontSize=8;				// Font size menu items
	var FontBold=1;				// Bold menu items 1 or 0
	var FontItalic=0;				// Italic menu items 1 or 0
	var MenuTextCentered='left';			// Item text position 'left', 'center' or 'right'
	var MenuCentered='left';			// Menu horizontal position 'left', 'center' or 'right'
	var MenuVerticalCentered='top';		// Menu vertical position 'top', 'middle','bottom' or static
	var ChildOverlap=.2;				// horizontal overlap child/ parent
	var ChildVerticalOverlap=.2;			// vertical overlap child/ parent
	var StartTop=200;				// Menu offset x coordinate
	var StartLeft=10;				// Menu offset y coordinate
	var VerCorrect=0;				// Multiple frames y correction
	var HorCorrect=0;				// Multiple frames x correction
	var LeftPaddng=3;				// Left padding
	var TopPaddng=2;				// Top padding
	var FirstLineHorizontal=0;			// SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
	var MenuFramesVertical=1;			// Frames in cols or rows 1 or 0
	var DissapearDelay=800;			// delay before menu folds in
	var TakeOverBgColor=1;			// Menu frame takes over background color subitem frame
	var FirstLineFrame='navig';			// Frame where first level appears
	var SecLineFrame='space';			// Frame where sub levels appear
	var DocTargetFrame='space';			// Frame where target documents appear
	var TargetLoc='';				// span id for relative positioning
	var HideTop=0;				// Hide first level when loading new document 1 or 0
	var MenuWrap=1;				// enables/ disables menu wrap 1 or 0
	var RightToLeft=0;				// enables/ disables right to left unfold 1 or 0
	var UnfoldsOnClick=0;			// Level 1 unfolds onclick/ onmouseover
	var WebMasterCheck=0;			// menu tree checking on or off 1 or 0
	var ShowArrow=1;				// Uses arrow gifs when 1
	var KeepHilite=1;				// Keep selected path highligthed
	var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10];	// Arrow source, width and height
 
function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}
 
 
// Menu tree
//	MenuX=new Array("Text à afficher", "Lien de la page à visiter", "image de fond (optionnel)", "nombre de sous rubrique", "hauteur", "largeur");
//	For rollover images set "Text to show" to:  "rollover:Image1.jpg:Image2.jpg"
 
Menu1=new Array("Présentation","javascript:top.location.href='Presentation.html'","",0,20,160);  
 
Menu2=new Array("Formateurs et intervenants","javascript:top.location.href='Formateurs.html'","",0,20,160);
 
Menu3=new Array("Donneurs d'ordres, clients","javascript:top.location.href='Clients.html'","",0,20,155);
 
Menu4=new Array("Liste des programmes","javascript:top.location.href='Programme.html'","",19,20,145);
	Menu4_1=new Array("Agent de Prévention et de Sécurité","Programme.html","",0,20,250);
	Menu4_2=new Array("Surveillant de Magasin","Programme.html","",0,20,200);
	Menu4_3=new Array("Conducteur de Chien","Programme.html","",0,20,200);
	Menu4_4=new Array("E.R.P","Programme.html","",0,20,200);
	Menu4_5=new Array("I.G.H","Programme.html","",0,20,200);
	Menu4_6=new Array("Equipier de Première Intervention","Programme.html","",0,20,200);
	Menu4_7=new Array("Equipier de Seconde Intervention","Programme.html","",0,20,200);
	Menu4_8=new Array("Sauveteur, Secouriste du Travail","Programme.html","",0,20,200);
	Menu4_9=new Array("A.F.P.S / A.F.P.S.A.M","Programme.html","",0,20,200);
	Menu4_10=new Array("C.F.A.P.S.E","Programme.html","",0,20,200);
	Menu4_11=new Array("Gestes et Postures et Postes et Postures","Programme.html","",0,20,200);
	Menu4_12=new Array("Aide à l'évacuation","Programme.html","",0,20,120);
	Menu4_13=new Array("Système de Sécurité Incendie","Programme.html","",0,20,120);
	Menu4_14=new Array("Audits","Programme.html","",0,20,120);
	Menu4_15=new Array("Sûreté aéroportuaire","Programme.html","",0,20,120);
	Menu4_16=new Array("Garde du corps","Programme.html","",0,20,120);
	Menu4_17=new Array("Conducteur d'autorité / de sécurité","Programme.html","",0,20,120);
	Menu4_18=new Array("Sécurité maritime et aérienne embarquée","Programme.html","",0,20,120);
	Menu4_19=new Array("Moniteur de tir","","",3,20,120);
        		Menu4_19_1=new Array("Arme 1","Programme.html","",0,20,120);
        		Menu4_19_2=new Array("Arme 2","Programme.html","",0,20,120);
        		Menu4_19_3=new Array("Tazer","Programme.html","",0,20,120);
 
Menu5=new Array("Partenariats","javascript:top.location.href='Partenariats.html'","",0,20,75);
Menu6=new Array("Divers","javascript:top.location.href='Divers.html'","",0,20,45);

En espérant que vous pourrez m'aider. Bonne journée.

**siddh** · 29/12/2005, 00h14

pfiou !
tout ça pour ça !

alors pour ffx, il suffit de mettre une position: fixed

donc ton menu va etre dans un element je suppose, un ul ou un div, tu lui met un id si c est pas deja fais

On va dire id="menu" pour l'exemple :
En style

Code :

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

1
2
3
4
5
#menu{
            position: fixed !important;
            position: absolute;
            z-index: 1000;
         }

le !important c est pour que ie prenne absolute et ffx fixed, apres tu le place avec top et left.

Pour ie, toujours avec cet id :
Dans du javascript

Code :

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

1
2
3
window.onscroll = function(){
                     document.getElementById('menu').style.top = document.body.scrollTop + "px";
                  }

et wala

Sinon pour un exemple, regardes ca je m'en sert dedans

**batmat86** · 30/12/2005, 11h30

Envoyé par siddh

alors pour ffx, il suffit de mettre une position: fixed

donc ton menu va etre dans un element je suppose, un ul ou un div, tu lui met un id si c est pas deja fais

Bonjour, merci de la réponse, alors je n'ai n'y ul ni div puisque je passe par un tableau comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
<table>
<tr>
	<td width="18%"><script type="text/javascript" src="GPCexmplmenu_var.js"></script>
	<script type="text/javascript" src="GPCmenu_com.js"></script></td>
	<td width="82%">
<h2>AUTORISATION D'EXERCER</h2>
....
</td>
</tr>
</table>

Et ensuite je débute en programmation javasript c'est le premier code que je récupéré et comprenais, et en html je suis débutant aussi, mais connaissance sont beaucoup plus pointu en C++ avec le bts que j'ai fais.

Donc est il possible d'avoir un peu plus de précision pour mon cas puisque je n'ai pas utilisé la structure indiqué

Merci encore par avance.

**siddh** · 30/12/2005, 12h15

Code :

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

<table id="menu">

**batmat86** · 30/12/2005, 12h25

Bonjour alors merci, mais les deux parties de votre code donné dans le premier message, je dois le mettre dans le css si j'ai bien compris ? Ou ailleurs

Désolé des questions bétes

**siddh** · 30/12/2005, 12h28

css

Code :

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

1
2
3
4
5
#menu{
            position: fixed !important;
            position: absolute;
            z-index: 1000;
         }

dans le head :

Code :

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

1
2
3
4
<script type='text/javascript'>
window.onscroll = function(){
                     document.getElementById('menu').style.top = document.body.scrollTop + "px";
                  }</script>

**batmat86** · 30/12/2005, 13h49

Alors cela ne fonctionne pas, là cela me fixe le texte que j'ai à droite donc dans la deuxième colonne et non le menu qui est à gauche et la première colonne. Et en plus le menu ne fonctionne plus

**siddh** · 30/12/2005, 13h58

peut etre que menu est deja utilisé comme id, essayes en mettant monmenu ?

**batmat86** · 30/12/2005, 14h04

Alors avec mon menu dans le css et aussi donc dans la table id, là c'est encore pire, plus rien est fixé et le menu que j'ai en flash ne fonctionne toujours plus

**siddh** · 30/12/2005, 14h27

un exemple :

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
<html>
	<head>
		<title>fixed</title>
		<style type="text/css">
			#autre{
				height: 2500px;
			}
			#monmenu{
				position: fixed !important;
				position: absolute;
				z-index: 1000;
				top: 0px;
			}
		</style>
		<script type="text/javascript">
			window.onscroll = function(){
				document.getElementById('monmenu').style.top = document.body.scrollTop + "px";
			}
		</script>
	</head>
	<body>
		<table id="monmenu">
			<tr><td>blabla</td></tr>
		</table>
		<div id="autre"></div>
	</body>
</html>

apres je sais pas e que font tes menus ...

**batmat86** · 30/12/2005, 14h47

Alors que l'exemple donné cela fonctionne mais une fois mis sur ma page cela ne fonctionne pas du tout comme dis précédemment.

Ce que fais mon menu c'est donné dans mon premier message avec le code, c'est un simple menu java.

Donc là je ne comprends pas pourquoi cela ne fonctionne pas, si besoin je peux mettre en ligne ce que cela me donne sur ma page en l'hébergeant, comme cela dans mon premier message il y a la page avec mon menu sans l'insertion du script donné si vous voulez voir.

**siddh** · 30/12/2005, 19h15

je vais regarder la version en ligne

**batmat86** · 02/01/2006, 22h44

Bonsoir, alors je relance le sujet pour savoir s'il y a eu une solution de trouvée

Au passage, il me semble que vous êtes passé modérateur si je ne me trompe pas, donc félicitations.

Et merci encore par avance de votre aide.

**siddh** · 03/01/2006, 04h53

bon,
j'ai du mettre le nez dans le code de ce menu.

C'est typiquement le genre de code qu'il ne faut pas faire si l'on a envie que quelqu'un qui passe derrière puisse s'en servir.

Je passe sur la lisibilité du code ...

Tous les éléments sont placés de manière absolue, meme les images ...

On ne peut pas avec ce menu.

Il vaut mieux essayer de trouver un autre menu déroulant.
Désolé

**batmat86** · 03/01/2006, 11h53

Bonjour, alors merci tout de même de la réponse, pour la structure du menu, je l'ai pris sur un SVM (Science et vie micro) ainsi que sur un site informatique

Si je ne peux rien faire alors c'est dommage, cela restera en état puisque je n'ai pas envie de me refaire tout le code de ce menu vu le temps que cela m'a pris.

Bonne journée et merci.

**batmat86** · 10/01/2006, 02h54

Bonjour, alors le problème a été résolu a force d'essai et par les connaissances d'un ami, voilà le code si cela peut aider quelqu'un

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
<body background="fond.jpg" style="overflow:hidden; margin: 0px;">
		<script type="text/javascript" src="GPCexmplmenu_var.js"></script>
		<script type="text/javascript" src="GPCmenu_com.js"></script>
		<div id="fixElement" style="position: relative; height: 15%; overflow:hidden; text-align: center ; vertical-align: middle;">
			<center><img src="banniere.jpg" alt=""></center>
		</div>
		<div id="mainContent" style="position: relative; margin-bottom: 0; height: 85%; overflow:auto;">
			<br>
			<center><font color="red" size="+3"><b><u>Donneurs d'ordres, clients</u></b></font></center>
			<br>
			<br>
			<table>
				<tr>
					<td width="18%">
					</td>
					<td width="82%">
						<font color="blue" size="+2"><b>Administrations :</b></font>
....
</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Et merci tout de même de vos propositions passées

Menu vertical fixe

JavaScript

Discussions similaires

Partager

Partager