Position d'un bloc par rapport au bord gauche de la fenêtre

**Lindorie** · 22/08/2007, 14h05

Bonjour,

Etant débutante en javascript, j'ai quelques petits problèmes...
En effet je souhaiterais positionner un menu (définit en position: absolute) en fonction de la position d'un bloc qui lui n'est pas en position absolute...
D'après mes recherches sur internet je crois comprendre qu'il faut utiliser offsetLeft pour avoir l'abscisse du bloc en pixel, mais je n'arrive pas à l'utiliser !!

j'ai bien essayé ça mais ça marche pas du tout.

Code :

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

1
2
3
4
5
 
 
var position_left = document.getElementById("corps").offsetLeft;
/* Position gauche du menu, en px. */
var left_menu = position_left + 20;

**Tober** · 22/08/2007, 14h58

tu peux préciser ce qu'est left_menu ?
si c'est la position gauche de ton menu, tu peux faire après ca :

Code :

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

document.getElementById("corps").style.left = left_menu

**Lindorie** · 22/08/2007, 16h08

left_menu est bien la position gauche du menu, en fait je modifie un script déjà existant...

Ce que tu me dis ça va modifier la position de l'élément "corps", non ? Cet élément est centré en css et c'est pas celui là que je veux modifier.
Je voudrais que le menu soit placé 20 px plus à droite de cet élément (le truc compliqué c'est que l'élément est positionné automatiquement et n'a pas de positionnement par rapport au bord gauche de la fenetre défini...)

**Tober** · 22/08/2007, 18h59

ouais j'ai confondu :

Code :

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

document.getElementById("menu").style.left = left_menu

essaye voir ça....

**Lindorie** · 22/08/2007, 20h04

Non ça fait rien de plus qu'avant, le menu bug et c'est tout. Mais j'ai l'impression que

Code :

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

document.getElementById("corps").offsetLeft;

ne renvoie pas de valeur (j'ai essayé de tester avec alert() pour voir ce que ça affichait mais y'avait rien)

**Bisûnûrs** · 22/08/2007, 22h37

Essaie de mettre en plus un position:relative sur le bloc parent dont tu veux que le position:absolute se réfère.

**Lindorie** · 27/08/2007, 11h50

Re-bonjour

J'ai abandonné ce menu, je suis allée voir ici http://css.developpez.com/galerie/?p...-verticaux#MV6
J'ai donc intégré ce menu dans mes pages, le seul souci c'est que le fonctionnement ne marche pas... (Bisûnûrs si tu m'entends...)

Voici le code :

Code html :

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
<head>
		<title>Cyclo Club de Vence</title>
		<META NAME="Description" CONTENT="Site du Cyclo club de Vence" />
		<META NAME="Keywords" CONTENT="Cyclo club de Vence, cyclisme, Vence, club cycliste, Alpes Maritimes, vélo, route, VTT, cyclisme sur la côte d'Azur, courses cyclistes, UFOLEP, 06" />
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet" type="text/css" href="style.css" />
 
		<script language="javascript" src="functions.js"></script>
		<link rel="stylesheet" type="text/css" href="menu.css" />
 
	</head>
 
	<body>
		<div id="global">
			<div id="logo">
				<img src="images/LOGO_CCVence.jpg" alt="logo CC Vence" />
			</div> <!-- fin LOGO -->
			<?      $page = $_GET['page']; ?>
		<div id="menu">
		<!--------------- ACCUEIL ---------------------->
			<div class="menu" id="menu1" onmouseover="affiche(this)">
			<a href="index.php">Accueil</a>
					<div class="sousmenu" id="sousmenu1" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php">Présentation Générale</a></div>
						<div><a href="index.php?page=11">(Ré-)Adhésion</a></div>
						<div><a href="index.php?page=12">Bureau</a></div>
					</div>
			</div>
		<!--------------------- ROUTE ------------------------>
			<div class="menu" id="menu2" onmouseover="affiche(this)">
			<a href="index.php?page=20">Route</a>
					<div class="sousmenu" id="sousmenu2" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php?page=20">Rdv des Cyclos</a></div>
						<div><a href="index.php?page=21">Résultats des Courses</a></div>
						<div><a href="index.php?page=22">Calendrier</a></div>
						<div><a href="index.php?page=23">Manifestations</a></div>
					</div>
			</div>
		<!----------------------- VTT ---------------------->
			<div class="menu" id="menu3" onmouseover="affiche(this)">
			<a href="index.php?page=30">VTT</a>
					<div class="sousmenu" id="sousmenu3" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php?page=30">Accueil VTT</a></div>
						<div><a href="index.php?page=31">Courses et Résultats</a></div>
						<div><a href="index.php?page=32">Calendriers</a></div>
						<div><a href="index.php?page=33">Photos</a></div>
					</div>
			</div>
 
		<!---------------------- LA VENCOISE ROUTE ----------------------->
			<div class="menu" id="menu4" onmouseover="affiche(this)">
			<a href="index.php?page=40">La Vençoise Route</a>
					<div class="sousmenu" id="sousmenu4" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php?page=40">Présentation</a></div>
						<div><a href="index.php?page=41">Inscription</a></div>
						<div><a href="index.php?page=42">Les Résultats</a></div>
						<div><a href="index.php?page=43">Photos</a></div>
					</div>
			</div>
 
		<!--------------------- LA VENCOISE VTT ------------------------>
		    <div class="menu" id="menu5" onmouseover="affiche(this)">
			<a href="index.php?page=50">La Vençoise VTT</a>
					<div class="sousmenu" id="sousmenu5" style="display:none" onmouseout="affiche(this)">
						<div><a href="index.php?page=50">Présentation</a></div>
						<div><a href="index.php?page=51">Inscription</a></div>
						<div><a href="index.php?page=52">Le Parcours</a></div>
						<div><a href="index.php?page=53">Les Résultats</a></div>
					</div>
			</div>
		<!---------------------- SPONSORS ----------------------->
			<div class="menu" id="menu6" onmouseover="affiche(this)">
			<a href="index.php?page=60">Sponsors</a>
			</div>
 
		<!--------------------- LIENS ------------------------>
			<div class="menu" id="menu7" onmouseover="affiche(this)">
			<a href="index.php?page=70">Liens</a>
			</div>
 
		<!--------------------- EMAIL------------------------>
			<div class="menu" id="menu8" onmouseover="affiche(this)">
			<a href="index.php?page=80">E-mail</a>
			</div>
 
		<!---------------------- FIN ----------------------->
		</div> <!-- fin Menu -->

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function affiche(obj){
	var id = obj.id;
 
	for(var i = 1; i <= 2; i++){
		document.getElementById('sousmenu'+i).style.display = "none";
	}
 
	if(document.getElementById('sous'+id)){
		document.getElementById('sous'+id).style.display = "block";
	}
}

Code css :

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
#menu{
	background-color: white;
	color:#fff;
	position: absolute;
	left: 10px;
	top: 176px;
	width: 120px;
}
#menu div{
	width:120px;
	text-align:center;
}
.menu{
	position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
	color: #fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	padding-top:3px;
	height:22px;
	display:block;
}
#menu div a:link, #menu div a:visited{
	background-color:#000080;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
	background-color:#ffd700;
	color: black;
}
.sousmenu{
	position:absolute;
	left:120px;
	top:0;
}

Le souci c'est qu'arrivé à un certain point (ds mon cas, "la Vençoise route") quand on survole les menus, les sous-menus se superposent et ceux survolés précédemment s'affichent toujours...

**Bisûnûrs** · 27/08/2007, 12h00

Dans la fonction JS, il faut que tu modifies :

Code :

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

1
2
3
for(var i = 1; i <= 2; i++){
   document.getElementById('sousmenu'+i).style.display = "none";
}

par :

Code :

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

1
2
3
for(var i = 1; i <= 5; i++){
   document.getElementById('sousmenu'+i).style.display = "none";
}

avec i <= n où n est le nombre de tes sous-menus.

**Lindorie** · 27/08/2007, 12h04

En fait après avoir étudié la fontion javascript il suffisait de changer le 2 par un 5 (équivalent au nombre de menus ayant des sous-menus) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function affiche(obj){
	var id = obj.id;
 
	for(var i = 1; i <= 5; i++){
		document.getElementById('sousmenu'+i).style.display = "none";
	}
 
	if(document.getElementById('sous'+id)){
		document.getElementById('sous'+id).style.display = "block";
	}
}

Merci Bisûnûrs pour ce menu qui me facilite la vie

EDIT : J'avais pas vu ta réponse Bisûnûrs, merci quand même

Position d'un bloc par rapport au bord gauche de la fenêtre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager