Surbrillance page en cours

bond70 · 11/11/2011, 06h24

Salut,

J'aimerais que le menu de gauche indique à l'utilisateur sur quelle page il se trouve.

Les autres pages doivent être grisée :

http://dev.leadcreation.com.au/services/

Comment réaliser un tel menu ?

MERCI !!!

milarepa · 11/11/2011, 09h18

Salut,
Je ne suis pas un pro mais si je peux apporter ma petite pierre à l'édifice...
Déjà je ne suis pas sur que tu puisses faire cela en css (ou disons juste avec du css) car vu le site vers lequel pointe ton lien; toute la page est rafraîchie quand tu cliques dans le menu donc un truc genre "a:active{nouveau style}" ne fonctionnera pas.
Si j'avais à faire cela, je pense que mon approche serait la suivante :
Dans le menu j'ajoute un attribut name avec un nom correspondant a la page vers laquelle pointe le lien, et tous avec un style gris comme tu veux par defaut.
Quand la page se charge, tu parses l'url de ta page en javascript et tu appliques une nouvelle class avec un nouveau style à l’élément correspondant.
Mais il doit y avoir plus efficace je pense.

NoSmoking · 11/11/2011, 09h35

Bonjour,
sujet déjà maintes fois abordé sur le forum, il en ressort que cela est à traité coté serveur, si langage serveur bien sûr.

milarepa · 11/11/2011, 11h03

J'ajoute un petit truc si jamais tu n'as pas la possibilité d'utiliser un langage serveur, en utilisant jquery c'est très simple à faire, donc pour reprendre ce que je disais avant et avec une page de test pas si minimale que cela mais récupérée dans un thread précedent :
l'idée est la suivante deux divs en particulier un avec l'attribut name="test", l'autre avec name="test2".
Si tu accèdes à ta page via une url finissant par test.html, le premier div deviendra noir alors que dans le fichier css il est defini comme vert.
Si tu y accèdes via une url finissant par test2.html c'est le deuxième div qui sera noir et le premier restera vert comme indiqué

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
<html>
<head>
<style type="text/css">
#page{
	width:80%;
	height:100%;		
	margin-left: auto;
	margin-right: auto;
	background-color:green;
	position:relative;
}
 
#imagegauche	
{ 
	position:absolute; 
	width:438px; 
	height:607px; 
	left:35px; 
	top:10px; 
	background-color:blue;
 
}
 
#imagehautdroit	
{ 
	position:absolute; 
	width:482px; 
	height:422px; 
	left:514px; 
	top:15px; 
	background-color:yellow; 
 
}
 
#imagebasdroit	
{ 
	position:absolute; 
	width:483px; 
	height:181px; 	
	left:497px; 
	top:475px;  
	background-color:red; 
}
</style>
</head>
 
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
	var path = window.location.pathname;
	var nom_page = path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('html') - 1);
     $('div[name =' + nom_page + ']').css("background-color","black");
});
</script>
 
 
<div id="page" name="test">
	<div id="imagegauche"  name="test2"></div>
 	<div id="imagehautdroit"></div>
	<div id="imagebasdroit"></div>
</div>
 
</html>

11/11/2011, 06h24	#1
bond70 Membre du Club Inscription : septembre 2008 Messages : 271 Détails du profil Informations forums : Inscription : septembre 2008 Messages : 271 Points : 45 Points : 45	Surbrillance page en cours Salut, J'aimerais que le menu de gauche indique à l'utilisateur sur quelle page il se trouve. Les autres pages doivent être grisée : http://dev.leadcreation.com.au/services/ Comment réaliser un tel menu ? MERCI !!!
	00

11/11/2011, 09h18	#2
milarepa Invité régulier Inscription : septembre 2007 Messages : 12 Détails du profil Informations forums : Inscription : septembre 2007 Messages : 12 Points : 5 Points : 5	Salut, Je ne suis pas un pro mais si je peux apporter ma petite pierre à l'édifice... Déjà je ne suis pas sur que tu puisses faire cela en css (ou disons juste avec du css) car vu le site vers lequel pointe ton lien; toute la page est rafraîchie quand tu cliques dans le menu donc un truc genre "a:active{nouveau style}" ne fonctionnera pas. Si j'avais à faire cela, je pense que mon approche serait la suivante : Dans le menu j'ajoute un attribut name avec un nom correspondant a la page vers laquelle pointe le lien, et tous avec un style gris comme tu veux par defaut. Quand la page se charge, tu parses l'url de ta page en javascript et tu appliques une nouvelle class avec un nouveau style à l’élément correspondant. Mais il doit y avoir plus efficace je pense.
	00

11/11/2011, 09h35	#3
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, sujet déjà maintes fois abordé sur le forum, il en ressort que cela est à traité coté serveur, si langage serveur bien sûr.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email