Discussion :

[aragorn23]

Je débute en CSS et je me suis inspiré des cours CSS pour faire un menu déroulant vertical avec des sous-menus.
Mon problème est le suivant quand je clique sur un lien des sous-menu mon menu disparait.
Quelle technique faut-il adopter afin que mon menu reste en permanence lorsque je navigue dans mon site ?

Merci d'avance pour vos réponses.

[LexWizard]

Salut,

Pourrais-tu nous montrer le code de ton menu ? Parce que c'est pas facile de dire d'où vient le problème comme ça.

Quand tu cliques sur un de tes liens du menu, ça change de page ?

[Bensor]

Je débute en CSS et je me suis inspiré des cours CSS pour faire un menu déroulant vertical avec des sous-menus.
Mon problème est le suivant quand je clique sur un lien des sous-menu mon menu disparait.
Quelle technique faut-il adopter afin que mon menu reste en permanence lorsque je navigue dans mon site ?

Merci d'avance pour vos réponses.

Passer sous un mode de navigation AJAX je suppose, tu changes de page donc c'est normal que ton menu disparaisse.

[trotters213]

Passer sous un mode de navigation AJAX je suppose, tu changes de page donc c'est normal que ton menu disparaisse.

Pas besoin de sortir la grosse artillerie pour ça. Une simple modif dans le CSS (voir le Javascript) et ça devrait aller mais c'est que que ça serait plus simple avec du code.

Pour apprendre facilement CSS regarde ces tutoriels et cours pour CSS : http://css.developpez.com/cours/

[Bensor]

Pas besoin de sortir la grosse artillerie pour ça. Une simple modif dans le CSS (voir le Javascript) et ça devrait aller mais c'est que que ça serait plus simple avec du code.

Bha, c'est pas vraiment la grosse artillerie. C'est même simple à mettre en oeuvre

[aragorn23]

Mon code est le suivant : pris sur le tutorial CSS de ce site.

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
<ul id="menuDeroulant">
 <li>
  <a href="#">Partie 1</a>
  <ul class="sousMenu">
   <li><a href="test1.php">test1php</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Partie 2</a>
  <ul class="sousMenu">
   <li><a href="test2.php">test2</a></li>
  </ul>
 </li>
</ul>

et la feuille de style associée :

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
body
{
 font: 11px verdana, sans-serif;
 background: #AFA99B url("fond.jpg") top left no-repeat;
 margin: 0;
 padding: 0;
}
#menuDeroulant
{
 width: 644px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li
{
 float: left;
 width: 150px;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: auto;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}
#menuDeroulant li:hover > .sousMenu { display: block; }