Discussion :

[mikael2235]

Bonjour à tous,

J'ai créer un menu pour mon site. Je souhaite que l'onglet menu de la page active se colore d'un background orange.

Mon site est fait comme ceci :
- 6 pages php avec 1 include qui appelle la page php du menu, de la sidebar et du footer. Autrement c'est du code html dans les pages
- 1 page php menu avec code html
- 1 page php sidebar avec code html
- 1 page php footer avec code html

Voici le code du menu :

Code :

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

1
2
3
4
5
6
7
8
9
      <ul id="menuDeroulant">
		<li><a href="index.php">Accueil</a>		</li>
		<li><a href="experiences.php">Experiences</a>		</li>
 
	  <li><a href="competences.php">Compétences</a>		</li>
		<li><a href="formations.php">Formations</a>	</li>
        <li><a href="loisirs.php">Loisirs</a>		</li>
       <li><a href="contact.php">Contact</a></li>
	</ul>

Voici le code css pour le menu :

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
#menuDeroulant
{
	width: auto;
	height: 21px;
	list-style-type: none;
	padding: 0px;
	border:0px;
	margin:0px auto 0px auto;
	position:absolute;
}
#menuDeroulant li
{
	float: left;
	width: 120px;
	padding: 0;
	border: 0;
	text-align:center;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #808080;

	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #666666;
	text-decoration: none;
}
#menuDeroulant li a:hover 
{
	background-color: #CCCCCC;
}
#menuDeroulant li a:active {
	background-color: #ee9414;
}

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position:relative;
}
#menuDeroulant .sousMenu li
{
	/*float: none;*/
	margin: 0;
	padding: 0;
	border: 0;
	width: 120px;
	border-top: 1px solid transparent;
	text-align: center;
	clear:both;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #808080;
	margin: 0;
	border: 0;
	text-decoration: none;
	background:  transparent url("images/fondTR2.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #CCCCCC;
}

#menuDeroulant li:hover > .sousMenu { display: block; }

Quand je met le background, la ou le css est en gras, ça ne marche pas !

Merci pour votre aide.

Mikael

[sebhm]

bonjour,

la pseudo classe :active ne sert pas à gérer la page en cours. le lien est 'actif' au moment où l'utilisateur clique dessus (en fait quand il fait un click gauche et que le bouton de la souris reste enfoncé).

Pour gérer la coloration de ton menu si la page est chargée, il faut que tu lui passes une classe et que tu définisses le css de cette classe, par exemple :

Code :

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

<li><a href="competences.php" class="li_actif">Compétences</a>		</li>

tu mets cette classe via PHP car tu sais dans quelle page tu est

Plus d'explications sans les cours et tutoriels CSS : http://css.developpez.com/cours/

[mikael2235]

bonjour,

la pseudo classe :active ne sert pas à gérer la page en cours. le lien est 'actif' au moment où l'utilisateur clique dessus (en fait quand il fait un click gauche et que le bouton de la souris reste enfoncé).

Pour gérer la coloration de ton menu si la page est chargée, il faut que tu lui passes une classe et que tu définisses le css de cette classe, par exemple :

Code :

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

<li><a href="competences.php" class="li_actif">Compétences</a>		</li>

tu mets cette classe via PHP car tu sais dans quelle page tu est

Salut sebhm,

Je viens d'essayer ce que tu m'as dit.

J'ai mis la classe pour chacun de mes liens, et définit le css. Par contre tous mes backgrounds sont en orange, et non uniquement celui de la page active.

Merci pour ton aide.

Mikael

[sebhm]

montre nous le code HTML + CSS de ton menu (complet)

[mikael2235]

En utilisant du php, avec le code suivant, cela marche :

Code :

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

<li><a href="/index.php" <?php echo ($_SERVER['REQUEST_URI'] == "/index.php")?'class="li_actif"':'' ?>>Accueil</a></li>

Merci.

Mikael


@sebhm : Mon menu est dans un fichier php, et dans mes pages j'ai mis un include.

[sebhm]

@sebhm : Mon menu est dans un fichier php, et dans mes pages j'ai mis un include.

d'accord, mais ce qui nous intéresse pour t'aider coté HTML/CSS, c'est le code source du fichier affiché dans le navigateur, peu importe ta structure PHP.

j'utilise pour ma part la variable $_SERVER["PHP_SELF"] pour la page en cours.
Regarde ce qu'il se passe avec une variable dans l'url, ca risque de perturber ta condition :

_SERVER["REQUEST_URI"] /tests/test.php?toto=12
_SERVER["SCRIPT_NAME"] /tests/test.php
_SERVER["PHP_SELF"] /tests/test.php