Discussion :

[laurentSc]

Bonsoir,

comme annoncé ailleurs, j'ai changé de code pour réaliser un menu à 3 niveaux ; par contre, comme dit dans le titre, si le 3e niveau est constitué d'une liste longue, je voudrais la mettre sur plusieurs colonnes. J'ai donc modifié un peu le css, mais ça ne change rien ; peut-on m'aider ?

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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<nav>
<div id="menu">
	<ul class="niveau1">
	<li ><a href="../accueil/accueil.php">Accueil</a></li> <!-- n1 -->
 
<!--<li><a href="#">Photos</a>
	<ul>-->
		<li><a href="#">Photos</a>
			<ul class="niveau2">
					<li><a href="#">Evénements</a>
						<ul class="niveau3">
							<li><a href="../arcon2012/arcon2012.php">Coupe de France Arçon 2012</a></li>
							<li><a href="../lafeclaz2012/lafeclaz2012.php">Coupe de France La Feclaz 2012</a></li>
							<li><a href="../chamonix2012/chamonix2012.php">Championnat de France Chamonix 2012</a></li>
						</ul>
					</li>
					<li><a href="#">Saison 2013/2014</a>
						<ul class="niveau3">
 
									<li><a href="../lafeclaz/lafeclaz.php">Coupe de France La Feclaz</a></li>
									<li><a href="../stage2014/stage.php">Stage 2014</a></li>
									<li><a href="../fb/foulee_blanche.php">Foulée blanche</a></li>
									<li><a href="../cpf_autrans/finale_cpf.php">Finale Coupe de France Autrans</a></li>
									<li><a href="../velo_trieves/velo_trieves.php">Week-end de vélo dans le Trièves</a></li>
									<li><a href="../photos_thomas/photos_thomas.php">Thomas Dubois dans le Vercors</a></li>
									<li><a href="../tir/tir.php">Tir carabine laser</a></li>
									<li><a href="../panathlon/panathlon.php">Soirée Panathlon</a></li>
									<li><a href="../3becs/3becs_velorail.php">Week-end rando aux 3 becs et vélorail en Ardèche</a></li>
 
						</ul>
					</li>
					<li><a href="#">Saison 2012/2013</a>
 
						<ul class="niveau3">
							<li><a href="../mucoroue/mucoroue.php">Muco roue 2013</a></li>							
							<li><a href="../ambel/ambel.php">rando à Ambel</a></li>
							<li><a href="../canoe_drome/canoe_drome.php">canoë sur la Drôme</a></li>
							<li><a href="../peisey-nancroix-2013/pn-2013.php">coupe de France à Peisey-Nancroix</a></li>
							<li><a href="../stage-2013/stage-2013.php">stage 2013</a></li>
							<li><a href="../AG2013/AG2013.php">AG 2013</a></li>
							<li><a href="../sortie0501/sortie0501.php">sortie du 05/01</a></li>
							<li><a href="../rando_allieres/rando_allieres.php">Rando aux Allières</a></li>
							<li><a href="../ski_roue/ski_roue.php">Séance de ski-roue</a></li>
							<li><a href="../rando131410/rando131410.php">Rando des 13/14-10</a></li>
							<li><a href="../muco-roue-2012/muco-roue-2012.php">Muco roue 2012</a></li>
							<li><a href="../ja_2012/ja_2012.php">Journée d'accueil 2012</a></li>
						</ul>
					</li>
			</ul>
		</li>
 
		<li><a href="#">Vidéos</a>
			<ul class="niveau2">
				<li><a href="#">Saison 2013/2014</a>
					<ul class="niveau3">
						<li><a href="../video_finale_cpf_2014/video_finale_cpf_2014.php">Finale coupe de France 2014</a></li>
						<li><a href="../thomas/thomas.php">Thomas Dubois dans le Vercors</a></li>
					</ul>	
				</li>
				<li><a href="#">Saison 2012/2013</a>
					<ul class="niveau3">
						<li><a href="../video_tussac/video_tussac.php">Rando à Tussac 2013</a></li>
						<li><a href="../video_mucoroue/video_mucoroue.php">Muco-roue 2013</a></li>
						<li><a href="../video_ambel/video_ambel.php">Rando à Ambel</a></li>
						<li><a href="../video_canoe/video_canoe.php">Canoë la Drôme</a></li>
						<li><a href="../video_stage_2013/video_stage_2013.php">Stage</a></li>
						<li><a href="../video_ski_roue/video_ski_roue.php">Séance de ski-roue</a></li>
						<li><a href="../video_ja_2012/video_ja_2012.php">Journée d'accueil (décembre)</a></li>
 
 
					</ul>
				</li>
			</ul>
	</li>
<li class="inverse"><a href="#">Le club</a><!-- n1 -->
	<ul class="niveau2">
		<li><a href="../pres/pres.php">Présentation</a></li>
		<li><a href="../vie_du_club/vie_du_club.php">Vie du club</a></li>
		<li><a href="../trombi2/trombi2.php">Trombinoscope</a></li>
		<li><a href="../contacts/contact.php">Bureau</a></li>
		<li><a href="../adhesion/adhesion.php">Adhésion</a></li>
		<li><a href="#">Calendriers</a>
			<ul class="niveau3">
				<li><a href="../cal/Calendrier.pdf" target="_blank">Club</a></li>
				<li><a href="../cal/2010-2011_saison.xls" target="_blank">National</a></li>
			</ul>
		</li>
		<li><a href="../ecrire/ecrire.php">Nous écrire</a></li>
		<li><a href="../part/partenaires.php">Partenaires</a></li>
	</ul>
</li>
 
 
 
<li><a href="../liens/liens.php">Liens</a></li>
</ul>
 
</nav>

Code css :

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
84
85
86
87
88
89
#menu {
	height: 28px;
	margin: 15px 0;
}
#menu ul, #menu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu li {
	width: 150px;
}	
#menu li a {
	display: block;
	text-decoration: none;
	text-align: center;
	border: 1px solid #fff;
}
/*---------- Niveau 1 ----------*/
#menu .niveau1 li {
	float: left;
	margin: 0 -1px 0 0;
}
#menu .niveau1 li a {
	padding: 5px 0;
	height: 16px;
	color: #fff;
	background: #746756;
}
#menu .niveau1 li:hover a,
#menu .niveau1 li a:hover {
	color: #fff;
	background: #6D8600;
}
/*---------- Niveau 2 ----------*/
#menu .niveau2 {
	position: absolute;
	top: -9999em;
}
#menu .niveau2 li {
	clear: left;
	margin: -1px 0 0;
}
#menu .niveau2 li a {
	color: #fff;
	background: #6D8600;
}
#menu .niveau2 li a:hover {
	color: #746756;
	background: #D8ED1A;
}
#menu li:hover .niveau2,
#menu .sfhover .niveau2 {
	top: auto;
	min-height: 0; /* corrige un bug IE7 */
}
/*---------- Niveau 3 ----------*/
#menu .niveau1 .niveau2 .niveau3 {
	position: absolute;	
	top: -9999em;
	border-top: 1px solid #fff; /* corrige un bug IE6 */
}
#menu .niveau3 li a {
	color: #fff;
	background: #6D8600;
}
#menu .niveau3 li:hover a,
#menu .niveau3 li a:hover {
	color: #746756;
	background: #D8ED1A;
}
#menu .niveau2 li:hover .niveau3,
#menu .niveau2 .sfhover .niveau3 {	
	top: auto;
	margin:-28px 0 0 149px;
}
#menu .inverse .niveau2 li:hover .niveau3,
#menu .inverse .niveau2 .sfhover .niveau3 {	
	top: auto;
	margin:-28px 0 0 -149px;
}
 
/* j'ai rajouté ces lignes pour obtenir ce que je souhaite mais ça change rien :( */
#menu .niveau3 li:nth-child(n+5)
{
	background: #ddd;
	left: 195px;
	top: -160px;
}

EDIT : le menu ci-dessus vient de http://www.ellm.net/labo/labo_menu.html

[Invité]

Bonjour Laurent,
pourquoi avoir ouvert une nouvelle discussion, alors que tu conclus (et clôtures) la précédente par :

Merci pour ta réponse, mais je n'aurai le temps de l'étudier que ce soir ou ce week-end...

Quell intérêt, à part celui d'agacer certains modos ??
(qui te l'ont déjà dit et répéter un bon millier de fois)

[laurentSc]

Bonjour Jérôme,

la discussion que tu cites, je l'avais clôturée non car elle était résolue mais car je me suis aperçu que le titre était faux (lignes au lieu de colonnes).

Sinon, c'est sûr que c'est le même problème, même s'il porte sur un autre code de menu...

[miss_socrates]

Est-ce qu'en spécifiant une certaine hauteur max. , la suite étant rejetée à la colonne suivante, cela irait ?

[NoSmoking]

Bonjour,
les LI étant en float:left et largeur fixée il suffit de déclarer une largeur double pour la UL que l'on veut faire passer sur 2 colonnes.

Un truc du style de

Code :

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

1
2
3
#menu ul.col_2{
  width:200%; /* largeur double */
}

[laurentSc]

Je viens d'essayer les 2 propositions, mais pour miss_socrates avec

Code css :

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

1
2
3
4
5
 
#menu .niveau3
{
	max-height : 50px;
}

ça ne change rien (toujours une seule colonne).

Et pour no_smoking, avec

Code css :

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

1
2
3
#menu ul.col_2{
  width:200%; 
}

(et mon truc avec nth-child supprimé)
et

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
15
16
17
 
<li><a href="#">Photos</a>
    <ul class="niveau2">
	<li><a href="#">Evénements</a>
		<ul class="niveau3">
			<li><a href="../arcon2012/arcon2012.php">Coupe de France Arçon 2012</a></li>
			<li><a href="../lafeclaz2012/lafeclaz2012.php">Coupe de France La Feclaz 2012</a></li>
			<li><a href="../chamonix2012/chamonix2012.php">Championnat de France Chamonix 2012</a></li>
		</ul>
	</li>	
 
        <li><a href="#">Saison 2013/2014</a>
	     <ul class="niveau3,col_2">
                <li><a href="../lafeclaz/lafeclaz.php">Coupe de France La Feclaz</a></li>
                <li><a href="../stage2014/stage.php">Stage 2014</a></li>
		<li><a href="../fb/foulee_blanche.php">Foulée blanche</a></li>
                etc.

ça met le contenu de la liste de niveau 3 dans la liste de niveau 2:
Evénements
Saison 2013/2014
Coupe de France La Feclaz
Stage 2014
Foulée blanche
etc.

[miss_socrates]

Selon le type de projet et de données à insérer, il me semble qu'il y a 2 possibilités:
1) soit faire 1 tableau à 3 colonnes
2) soit créer 3 div côte à côte

[NoSmoking]

Code :

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

<ul class="niveau3,col_2">

Comment appliquer plusieurs styles à un élément ?

[laurentSc]

Je suis d'accord no-smoking, erreur de débutant...mais si je corrige, je rétablis bien mon niveau 3, sauf que la liste, même si elle est longue reste sur une seule colonne.

Si je résume ton idée miss_socrates (ce soir, aucun essai, car trop crevé...), le niveau 3, au lieu d'être une liste, serait soit un tableau à N colonnes, soit plusieurs div côte à côte : j'ai bien compris ?

[NoSmoking]

Je suis d'accord no-smoking, erreur de débutant...

Bon je te mets un exemple qui sommeillait sur mon disque en t'attendant...

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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu en CSS</title>
<meta name="Author" content="NoSmoking">
<style>
body {
  font:normal 1.0em/1.5em Verdana, Arial,Helvetica,sans-serif;
  background-color:#e6e6e1;
}
#page{
  margin: 0 auto;
  width:40em;
}
#page h1{
  color:#006699;
  text-shadow:1px 1px 0 #fff;
  vertical-align:middle;
}
#page h1 img{
  vertical-align:middle;
  margin:0 1em 0 0;
}
#menu {
  margin:0;
  padding:0;
  background:#EEE;
  background:#e1e4f2;
  border: 1px solid #48B;
  line-height:2em;
  height:3em;
  font-size:0.8em;
  text-align:center;
}
/* Barre de menu principale */
#menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
#menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.5em;
}
#menu li {
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
#menu ul li a {
  color:#666;
  font-weight:normal;
}
#menu li:hover > a {
  background:#4D90FE;
 
  color:#FFF;
}
#menu li:hover > ul{
  display: block;/**/
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF;
  border:solid 1px #48B;
}
/* position et dimension des sous menus */
#menu ul li {
  margin:0;
  width:10em;
}
#menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}
#menu ul.col_2{
  width:200%; /* largeur double */
}
#menu ul.col_3{
  width:300%; /* largeur triple */
}
/* indicateur de présence d'un sous menu */
a.plus:after{
  content: "\25BA";
  float:right;
  color:#ABC;
}
</style>
</head>
<body>
<div id="page">
  <h1><img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png">Menu en CSS</h1>
  <ul id="menu">
      <li><a href="#">Menu...</a>
          <ul>
              <li><a href="#" class="plus">Une colonne</a>
                  <ul>
                      <li><a href="#">Sous menu 1.1</a></li>
                      <li><a href="#">Sous menu 1.2</a></li>
                      <li><a href="#">Sous menu 1.3</a></li>
                      <li><a href="#">Sous menu 1.4</a></li>
                      <li><a href="#">Sous menu 1.5</a></li>
                      <li><a href="#">Sous menu 1.6</a></li>
                      <li><a href="#">Sous menu 1.7</a></li>
                      <li><a href="#">Sous menu 1.8</a></li>
                      <li><a href="#">Sous menu 1.9</a></li>
                  </ul>
              </li>
              <li><a href="#" class="plus">Deux colonnes</a>
                  <ul class="col_2">
                      <li><a href="#">Sous menu 2.1</a></li>
                      <li><a href="#">Sous menu 2.2</a></li>
                      <li><a href="#">Sous menu 2.3</a></li>
                      <li><a href="#">Sous menu 2.4</a></li>
                      <li><a href="#">Sous menu 2.5</a></li>
                      <li><a href="#">Sous menu 2.6</a></li>
                      <li><a href="#">Sous menu 2.7</a></li>
                      <li><a href="#">Sous menu 2.8</a></li>
                      <li><a href="#">Sous menu 2.9</a></li>
                  </ul>
              </li>
              <li><a href="#" class="plus">Trois colonnes</a>
                  <ul class="col_3">
                      <li><a href="#">Sous menu 3.1</a></li>
                      <li><a href="#">Sous menu 3.2</a></li>
                      <li><a href="#">Sous menu 3.3</a></li>
                      <li><a href="#">Sous menu 3.4</a></li>
                      <li><a href="#">Sous menu 3.5</a></li>
                      <li><a href="#">Sous menu 3.6</a></li>
                      <li><a href="#">Sous menu 3.7</a></li>
                      <li><a href="#">Sous menu 3.8</a></li>
                      <li><a href="#">Sous menu 3.9</a></li>
                  </ul>
              </li>
          </ul>
      </li>
  </ul>
</div>
</body>
</html>

Je l'ai un peu arrangé pour qu'il soit présentable, à toi de le triturer pour comprendre qu'avec un peu de méthode on peux y arriver.

Je tiens quand même à dire que cela n'est qu'une façon de faire parmi bien d'autres.

[laurentSc]

Merci no-smoking pour ton exemple ; en effet, il répond exactement à mon besoin ; je l'étudierai (probablement) demain et te tiendrai au courant.

[laurentSc]

heureusement que j'avais rajouté "probablement" car en fait, je n'ai pu essayer qu'aujourd'hui...

Ca répond bien à mon besoin sauf pour un cas particulier : dans ton cas, c'est le niveau 3 que l'on peut mettre sur plusieurs colonnes ; or j'ai une rubrique de niveau 2 que je voudrais aussi mettre sur 2 colonnes ; je lui ai donc appliqué la classe col_2 :

Code html :

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

1
2
3
<li><a href="#">Le club</a><!-- n1 -->
	<ul class="col_2">
        .etc

et pour que cette classe s'applique aussi au niveau 2, j'ai modifié le css :

Code css :

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

1
2
3
#menu ul.col_2,#menu.col_2{
  width:200%; /* largeur double */
}

mais ça ne suffit pas ; que faudrait-il faire ?

[NoSmoking]

j'ai une rubrique de niveau 2 que je voudrais aussi mettre sur 2 colonnes

il faut bien comprendre que lorsque l'on utilise les % cela sera un % des dimensions du parent, comme tu peux le voir dans l’exemple que je t'ai fourni et où les LI sont dimensionnés en largeur.

Code :

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

1
2
3
4
5
/* position et dimension des sous menus */
#menu ul li {
  margin:0;
  width:10em;
}

Dans le cas des LI de niveau 1, le menu principal, il n'y a aucune largeur de fixée, donc les LI ne prennent la place que du strict nécessaire ce qui fait que un 200% de n'importe quoi donne ...n'importe quoi

Remarque personnelle :
j'ai du mal à voir où tu veux en venir avec tes menus mais j'ai le sentiment que coté ergonomie tu pars dans la grande déroute de l'utilisateur.
Un menu devrait resté simple, le plus simple possible sinon on frise le défaut de conception

[Invité]

"LaurenSC", ou...
"
Pourquoi faire simple quand on peut :

• faire compliqué, parce qu'on n'a pas pris le temps d'une REFLEXION LOGIQUE
• perdre du temps, et en faire perdre aux autres (dont modos et âmes charitables qui, à force, s'agacent...), alors que soit-même on n'a pas toujours (ou plutôt : "toujours pas" !!) le temps de tester les solutions proposées

"

Bref.

De temps en temps il faut savoir prendre le temps de perdre du temps pour gagner du temps, surtout quand on manque de temps.