Explications concises menu déroulant en CSS

**No3l_tek** · 22/04/2008, 08h40

Bonjour à tous.

J'ai suivi le tutorial du site pour créer un menu déroulant rien qu'en css.
J'ai retouché le code pour le mettre à ma manière mais il est vrai que certaines choses sont floues.

J'aimerai savoir qu'elles propriétés font qu'un menu rien qu'en css sera un menu déroulant horizontal ou vertical (déploiement)

Ce que j'arrive à faire c'est un menu horizontal qui se déplie verticalement et un menu vertical qui se déplie verticalement.

Mais Vertical -- > déploiement horizontale Comment faire ??

Je pense que c'est une histoire de float et de position et peut être de display non?
Merci de votre aide

Voici ce à quoi j'arrive : ICI

Voici le code du menu HTMl

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
 
<ul id="menuDeroulant">
			<li><a href="#">Accueil</a> <!-- Nom du premier menu  --></li>
 
			<li><a href="#">Comite</a> <!-- Nom du deuxieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Dates et reunions</a></li>
					<li><a href="#">Bureau directeur</a></li>
					<li><a href="#">Conseil d'administration</a></li>
					<li><a href="#">Commissions</a></li>
				</ul>
			</li>
 
			<li><a href="#">Competitions</a> <!-- Nom du troisieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Rencontres</a></li>
					<li><a href="#">InterComites</a></li>
					<li><a href="#">Gest'hand</a></li>
					<li><a href="#">Calendrier</a></li>
					<li><a href="#">Sanctions</a></li>
				</ul>
			</li> 
 
			<li><a href="#">Formations</a> <!-- Nom du quatrieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Joueurs</a></li>
					<li><a href="#">Animateurs</a></li>
					<li><a href="#">Arbitres</a></li>
					<li><a href="#">Diverses</a></li>
					<li><a href="#">Anim'Hand</a></li>
				</ul>
			</li>
 
			<li><a href="#">Annuaire Clubs</a> <!-- Nom du cinquieme menu  --></li> 
 
			<li><a href="#">Ressources</a> <!-- Nom de premier menu  -->
				<ul class="sousMenu">
					<li><a href="#">Memento</a></li>
					<li><a href="#">Modèles à télécharger</a></li>
					<li><a href="#">Partenaires du comité</a></li>
				</ul>
			</li>
		</ul>

Et là le CSS

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
74
75
76
77
78
79
80
81
82
 
@charset "utf-8";
/* CSS Document */
 
#menuDeroulant
{
	 width: 960px;
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font: 12px verdana, sans-serif;
	 text-align: center;
	 z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant li
{
	 float: none;
	 width: 150px;
	 margin: 0;
	 padding: 0;
	 border: 0;
	 left: 50%; 
	 right: 50%;
	 z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
	 display: none; /* rendre invisble les sous */
	 position: relative;
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
	 border: 0;
}	
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
	 float: none;
	 margin-left: 150px;
	 padding: 0;
	 border: 0;
	 width: 149px;
	 border-top: 1px solid transparent; /* 1px solid transparent */
	 border-right: 1px solid transparent;  /* 1px solid transparent */
}			
/* --------------------------------------------- */	
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
	 display: block;
	 height: auto;
	 color: #FFF;
	 background-image:url(fondT.png);
	 margin: 0;
	 padding: 4px 8px; /* 4px 8px */
	 border-right: 1px solid #fff;
	 text-decoration: none;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover { background-image:url(fondT2.png); } /* Image RollOver des Menus */
/* --------------------------------------------- */
#menuDeroulant li a:active { background-color: #5F879D; } /* Couleur de la police lors du clic */
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
	 display: block;
	 float : none;
	 color: #FFF;
	 margin: 0;
	 border: 0;
	 text-decoration: none;
	 background: transparent url("fondTR.png") repeat;  /* Image de fond  des sous-menus */
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none;background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu { display: block; }		
/* --------------------------------------------- */

**pierre24** · 22/04/2008, 09h48

Pas forcement une histoire de float !

Mais il à a du display dans l'air oui !
Par exemple, initialement ton sous menu aura la propriété Display : none (caché). Et lorsque tu passe sur un lien, cette meme propriété passe a Display : bloc par exemple. Ton probleme vient de la propriété z-index que tu as du oublier ce qui fait que lors de l'affichage de ton sous menu, celui-ci décale les autres éléments de ta page !

Moi je ferais de la maniere suivante :

Code :

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

1
2
3
4
5
6
7
8
 
.sousMenu{
   position : absolute; /* en faisant garde à d'autres éléments en dessus qui pourraient venir contraindre au choix du absolute*/
   top: 100px; /*pour placer ton sous menu à l'endroit exact par exemple.*/
   left: 100px; /*toujours pour placer ton sous menu à l'endroit exact*/
   z-index:1; /* tres important ds la constitution d'un sous menu*/
...
}

Apres je ne suis pas un pro, mon code est surement criticable !

**pierre24** · 22/04/2008, 09h51

J'avoue que je regarde les CSS présentés sur ce forum, et je pense qu'il y a moyen d'écrire plus simplement et plus clairs certaines choses

Pour ma part, j'ecrit du CSS beaucoup plus simplement pour arriver aux memes résultats mais après je ne suis qu'un novice, il y certainement pleins de choses qui m'échappent !

**No3l_tek** · 22/04/2008, 10h08

Merci de ta réponse.
De mon coté j'ai avancé je mets le rendu sur le même lien plus haut.

Je n'arrive pas à résoudre l'alignement.

Je sais que je mets des choses qui ne servent à rien lol, je suis encore plus novice que toi ^^.

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
74
75
76
77
78
79
80
81
82
83
 
@charset "utf-8";
/* CSS Document */
 
#menuDeroulant
{
position: relative;
width: 960px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
font: 12px verdana, sans-serif;
text-align: center;
z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant li
{
float: none;
width: 150px;
margin: 0;
padding: 0;
border: 0;
left: 50%;
right: 50%;
z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
display: none; /* rendre invisble les sous */
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
top: 0;
margin-left: 150px;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent; /* 1px solid transparent */
}
/* --------------------------------------------- */
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
display: block;
height: auto;
color: #FFF;
background-image:url(fondT.png);
margin: 0;
padding: 4px 8px; /* 4px 8px */
border-right: 1px solid #fff;
text-decoration: none;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover { background-image:url(fondT2.png); } /* Image RollOver des Menus */
/* --------------------------------------------- */
#menuDeroulant li a:active { background-color: #5F879D; } /* Couleur de la police lors du clic */
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
float : none;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat; /* Image de fond des sous-menus */
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none;background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu { display: block; }
/* --------------------------------------------- */

**No3l_tek** · 22/04/2008, 10h18

En fait ce que j'ai fait c'est bidouiller...
Du coup je viens de tester sous IE7 et c'est CRADE ^^ ...

Je vais recommencer au clair. Mais j'attends toujours vos conseils pour ce genre de menus...qui je trouve est très "embêtant" à concevoir pour un novice

**pierre24** · 22/04/2008, 10h20

je l'avoue c'est pas trivial !
Par contre , essais de mettre ton code dans les balises [CODE] et non pas [QUOTE], ce sera plus lisible !

Explications concises menu déroulant en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager