Menu CSS permanent

Version imprimable

08/08/2007, 01h01
aragorn23

Menu CSS permanent

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.
08/08/2007, 09h42
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 ?
08/08/2007, 10h52
Bensor

Citation:

Envoyé par 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.

Passer sous un mode de navigation AJAX je suppose, tu changes de page donc c'est normal que ton menu disparaisse.
08/08/2007, 11h04
trotters213

:salut:

Citation:

Envoyé par Bensor

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/
08/08/2007, 11h05
Bensor

Citation:

Envoyé par trotters213

:salut: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 :king:

Code

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

Code:

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:

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; }