menu en html/css

Version imprimable

menu en html/css

Bonjour tout le monde,

j'ai un menu en html que j'ai copié:

Code:

1
2
3
4
5
6
7
8
<ul class="glossymenu bleu">
    <li class="current"><a href="accueil.aspx"><b>Accueil</b></a></li>
    <li><a href="#"><b>Produits</b></a></li>
    <li><a href="accessoire.aspx"><b>Acheter un produit</b></a></li>
    <li><a href="#"><b>News</b></a></li>    
    <li><a href="#"><b>L'entreprise</b></a></li>    
    <li><a href="#"><b>Contact</b></a></li>
</ul>

et son code css:

Code:

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
.glossymenu{
position: relative;
padding: 0 37px 0 36px;
margin: 0 auto 0 auto;
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px;
}
.bleu{
background: url(images/bleu1.gif) repeat-x;
}
.bleu li.current a, .bleu li a:hover{
background: url(images/bleu2.gif) no-repeat;
}
.bleu li.current a b, .bleu li a:hover b{
background: url(images/bleu3.gif) no-repeat right top;
}

mon problème est que le style "current" s'applique toujours à la page "accueil.aspx" même si je change de page :aie:

qu'est ce que je dois faire pour résoudre ce problème svp?

02/07/2012, 23h58
ibrakola
Bonsoir bouchra19,
j'ai pas compris ta question, car vue
Code:

1 2 <li class="current"><a href="accueil.aspx"><b>Accueil</b></a></li>
c'est normal que ton style "current" s'applique toujour a la page accueil.
03/07/2012, 09h01
bouchra19

oui je sais, mais je ne sais pas comment le changer
je pence que ça se fait en javascript mais je ne sais pas comment

Je pense que la réponse que tu attend est tout simplement:

Si tu es sur la page d'accueil,

Code:

1
2
3
4
5
6
7
8
9
 
<ul class="glossymenu bleu">
    <li class="current"><a href="accueil.aspx"><b>Accueil</b></a></li>
    <li><a href="#"><b>Produits</b></a></li>
    <li><a href="accessoire.aspx"><b>Acheter un produit</b></a></li>
    <li><a href="#"><b>News</b></a></li>    
    <li><a href="#"><b>L'entreprise</b></a></li>    
    <li><a href="#"><b>Contact</b></a></li>
</ul>

Si tu es sur la page produit,

Code:

1
2
3
4
5
6
7
8
9
 
<ul class="glossymenu bleu">
    <li><a href=""><b>Accueil</b></a></li>
    <li class="current"><a href=""><b>Produits</b></a></li>
    <li><a href="accessoire.aspx"><b>Acheter un produit</b></a></li>
    <li><a href="#"><b>News</b></a></li>    
    <li><a href="#"><b>L'entreprise</b></a></li>    
    <li><a href="#"><b>Contact</b></a></li>
</ul>

03/07/2012, 11h25
bouchra19

oui c'est exactement ce que je veux 8-)

le problème c'est que le menu se trouve dans une page master (qui s'applique à toutes les pages)
03/07/2012, 11h37
mcoutant

Si je ne dis pas de bêtise, tu dois avoir en JS un window.location (ou dans ce style) qui peut te retourner la page ou tu te trouve.
Ensuite tu fais tes conditions et en fonctions de tes conditions tu rajoute le classe à ton li.

Pour rajouter une classe en jQuery -> addClass