Surbrillance de l' option du menu dans la page en cours
Merci pour ta réponse R1ZIB !
Finalement j'ai réalisé le menu complet en css en m'aidant du tutoriel:
http://www.comeric.fr/IF/photographe-accueil.htm
Attention ! Pour l'instant le menu en css n'est présent que sur cette page, sur les autres pages le menu n'a pas encore été modifié, j'attends de l'avoir finalisé sur la page d'accueil pour le décliner sur les autres pages.
Mais il me reste encore quelques soucis :( :
Voici la partie html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <td width="730" align="center" valign="middle">
<ul id="menuDeroulant">
<li><a href="#">Accueil |</a></li>
<li><a href="#">Portrait |</a>
<ul class="sousMenu">
<li><a href="/IF/photographe-exterieur.htm">Extérieur</a></li>
<li><a href="/IF/photographe-studio.htm">Studio</a></li>
</ul>
</li>
<li><a href="/IF/photographe-ceremonie.htm">Cérémonie |</a></li>
<li><a href="/IF/photographe-corporate.htm">Corporate |</a></li>
<li><a href="/IF/photographe-evenementiel.htm">Evénementiel |</a></li>
<li><a href="/IF/photographe-support.htm">Support |</a></li>
<li><a href="/IF/photographe-phototheque.htm">Photothèque |</a></li>
<li><a href="/IF/photographe-contact.htm">Contact</a></li>
</ul></td> |
Voici la partie 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
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
| #menuDeroulant
{
width: 620px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
letter-spacing: 0.1em;
list-style-type: none;
margin: 0 auto;
padding: 0;
border: 0;
top: 0;
/* left: 0;*/
}
#menuDeroulant li
{
float: left;
/* width: 100px;*/
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 80px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant li a:hover { color: #bcb9a9; }
#menuDeroulant li a:active { color: #bcb9a9; }
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #000;
/* background: #3B4E77;*/
margin: 0;
padding: 4px 3px;
/* border-right: 1px solid #000;*/
text-decoration: none;
}
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #000;
margin: 0;
border: 0;
text-decoration: none;
background:#787769;
}
#menuDeroulant .sousMenu li a:hover
{
background:#787769;
color:#bcb9a9;
}
#menuDeroulant li:hover > .sousMenu { display: block; } |
- Je voudrais que la barre verticale "|" entre les options du menu reste noire tout le temps (sans état "hover"). Vous pouvez visualiser ce que je souhaiterais obtenir sur les autres pages du site.
- Je souhaiterais que, par exemple, lorsque on est sur la page "Cérémonie", le mot "Cérémonie" ne soit pas en noir, mais en "#bcb9a9". Vous pouvez visualiser ce que je souhaiterais obtenir sur les autres pages du site.
Merci d'avance pour votre aide :D
Surbrillance de la page en cours dans un menu de navigation
Bonjour,
J'ai à présent mis le menu en css sur toutes les pages :
http://www.comeric.fr/IF/photographe-accueil.htm
Il reste encore que l'option du menu de la page active reste en noir et n'est toujours pas en "#bcb9a9"... :(
- Comment faire pour que l'option du menu de la page active soit en surbrillance ? Par exemple quand on est sur la page "Accueil", je voudrais que le mot Accueil dans le menu soit en couleur en "#bcb9a9" au lieu d'être en noir.
J'ai essayé plein de solutions, mais ça ne fonctionne toujours pas... :(
Merci d'avance pour votre aide
Surbrillance de la page en cours dans un menu de navigation
Bin dis donc... Pô beaucoup de soutien... :(
Pour marquer la page en cours dans un menu de navigation, voici la solution que j'ai trouvée :
Il faut créer 2 attributs id (ou des classe si on a choisi d'utiliser des classe) que l'on "déplace" sur le "li" correspondant à la page en cours. La 1ère classe est "en-cours" et la seconde "pas-en-cours".
Il a fallu créé l'attribut "pas-en-cours", car sinon l'option "Extérieur" était aussi en surbrillance car elle héritait de l'attribut "en-cours" de "Portrait"
Donc, quand on est sur la page "Portrait/Studio", l'option "Portrait" est en surbrillance, mais aussi l'option "Studio" : c'est l'option "en-cours". L'option "Extérieur", quant à elle, est en noir et se met en surbrillance au passage de la souris grâce à l'attribu "pas-en-cours".
Par exemple pour la page "Portrait/Studio" :
Côté HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ul id="menuDeroulant">
<li><a href="/IF/photographe-accueil.htm">Accueil</a>| </li>
<li id="en-cours"><a href="#">Portrait</a>|
<ul class="sousMenu">
<li id="pas-en-cours"><a href="/IF/photographe-exterieur.htm">Extérieur</a></li>
<li><a href="#">Studio</a></li>
</ul>
</li>
<li><a href="/IF/photographe-ceremonie.htm">Cérémonie</a>| </li>
<li><a href="/IF/photographe-corporate.htm">Corporate</a>| </li>
<li><a href="/IF/photographe-evenementiel.htm">Evénementiel</a>| </li>
<li><a href="/IF/photographe-support.htm">Support</a>| </li>
<li><a href="/IF/photographe-phototheque.htm">Photothèque</a>| </li>
<li><a href="/IF/photographe-contact.htm">Contact</a></li>
</ul> |
Côté CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| #menuDeroulant #en-cours a
{
color: #bcb9a9;
}
#menuDeroulant #pas-en-cours a
{
color: #000;
}
#menuDeroulant #pas-en-cours a:hover
{
color: #bcb9a9;
} |
Voilà ça marche !
Code complet du menu CSS compatible IE6
Mon menu CSS compatible IE6 est terminé. Vous trouverez le code complet à cette adresse : http://www.developpez.net/forums/d84...souris-dessus/
