Afficher des sous-menus sur plusieurs lignes

**laurentSc** · 07/06/2014, 15h41

Bonjour,

j'ai un menu horizontal dont un des sous-menus (menu de niveau 4) est si rempli que je voudrais l'afficher sur 2 lignes, mais ce que je fais n'est pas bon vu que, les 2 colonnes étant 2 listes, celles-ci sont affichées l'une par-dessus l'autre alors que je voulais que la 2e soit à gauche de la première.

Voici mon code :

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
<ul id="nav">
...
<li><a href="#">Photos</a>
	<ul>
		<li><a href="#">Photos</a>
		<ul>
			<li><a href="#">Saison 2013/2014</a>
			<ul class="ul_table ul1">
                            ...
			</ul>
			<ul class="ul_table ul2">
				<li><a href="../tir/tir.php">Tir carabine laser</a></li>
				<li><a href="../panathlon/panathlon.php">Soirée Panathlon</a></li>
			</ul>
                            ...

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
 
[/* style des listes niveau 4 */
#nav ul ul  ul .ul1{
	left: 181px;
	top: 0px;
}
 
#nav ul ul  ul .ul2{
	left: 360px;
	top: 0px;
}
 
.ul_table {
display:inline;
}

Que faudrait-il que je fasse ?

**Muchos** · 08/06/2014, 02h21

j'ai un menu horizontal dont un des sous-menus (menu de niveau 4) est si rempli que je voudrais l'afficher sur 2 lignes

Peut-être pouvez-vous voir du côté du module CSS3 multi-column. À utiliser avec les préfixes propriétaires. Ex:

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Liste sur deux lignes</title>
  <style>
ul { columns: 2; }
  </style>
</head>
<body>
<ul>
  <li> foo
  <li> bar
  <li> less
  <li> more
</ul>
</body>
</html>

Néanmoins, à ce niveau de profondeur, ne faudrait-il pas lister les liens sur une page plutôt que de faire un menu déroulant (surtout si c'est pour casser la structure)?

**laurentSc** · 08/06/2014, 12h41

D'abord, merci pour la réponse.
Ensuite, que voulez-vous dire par "casser la structure" ?
Enfin, j'ai testé votre code et un code très similaire :

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Liste sur deux lignes</title>
  <style>
body { columns: 2; }
  </style>
</head>
<body>
<ul>
  <li> foo
  <li> bar
  <li> less
  <li> more
</ul>
</body>
</html>

mais le style n'est pas pris en compte à savoir que je voie la liste sur une seule colonne...

**Muchos** · 08/06/2014, 18h57

que voulez-vous dire par "casser la structure" ?

De faire deux listes quand il en faut une seule.

j'ai testé votre code

Avec les préfixes propriétaires? Sur quel(s) navigateur(s)?

et un code très similaire

Pourquoi sur BODY? C'est votre liste qui doit être sur deux colonnes.

PS: Voilà un CodePen pour la liste sur deux colonnes.

**laurentSc** · 08/06/2014, 20h08

Envoyé par Muchos

De faire deux listes quand il en faut une seule.

OK, j'avais opté pour faire 2 listes inline plutôt qu'une table avec une liste dans chaque cellule.

body au lieu de ul car j'avais repris le code de votre lien. Je suis revenu en arrière.

Avec le code du CodePen, ça marche avec les 4 navigateurs avec lesquels je teste (IE8, FF, Chrome et Safari) alors qu'avec le code initial, ça ne marchait que avec IE8.

Du coup, j'ai voulu l'appliquer à mon code, mais là, quand je survole, rien ne s'affiche

Voici mon code :

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
<li><a href="#">Saison 2013/2014</a>
	<ul  class="longList">
		<li>
			<ul >
				<li><a href="../lafeclaz/lafeclaz.php">Coupe de France La Feclaz</a></li>
				<li>...</li>
				<li>...</li>
				<li>...</li>
				<li>...</li>
			</ul>
		</li>
		<li>
			<ul>
				<li>...</li>
				<li>...</li>
			</ul>
		</li>
	</ul>
</li>

Code css :

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

1
2
3
4
5
6
.longList {
-webkit-columns: 2;
-moz-columns: 2;
-ms-columns: 2;
columns: 2;
}

Pourquoi ? Mon code est extrait du code d'un menu ; l'adresse du site est http://vercorshandisport.org et le sous-menu qui ne s'affiche pas, c'est au survol de photos > photos > saison 2013/2014.

**NoSmoking** · 10/06/2014, 20h12

Bonjour,
j'ai extrait un morceau de ton code et une réindentation devrait te permettre d'observer les niveaux d'imbrications

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
<li><a href="#">Saison 2013/2014</a>
    <ul class="longList">
        <li>
            <ul>
                <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>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="../tir/tir.php">Tir carabine laser</a></li>
                <li><a href="../panathlon/panathlon.php">Soirée Panathlon</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Saison 2012/2013</a>
    <ul>
        <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>

**laurentSc** · 10/06/2014, 23h52

Merci mais ta proposition est exactement ce que j'ai essayé et donc le problème reste...

**NoSmoking** · 12/06/2014, 18h41

...ta proposition est exactement ce que j'ai essayé...

ce n’était pas une proposition mais TON CODE.

Je répètes, observe les niveaux d'imbrications entre ce qui marche et ce qui ne marche pas!

**laurentSc** · 12/06/2014, 19h25

OK, OK,

j'arrive pas à voir ce qui cloche, ni pourquoi

Code html :

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

1
2
3
4
5
6
7
8
9
10
<ul>
	<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>
</ul>

fonctionne et pas ça :

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
<ul>
	<li>
		<ul>
			<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>
		</ul>
	</li>
</ul>

**NoSmoking** · 12/06/2014, 20h26

et là, est ce tu la vois la différence d'imbrication ?

Code html :

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

1
2
<ul>
			<li><a href="../lafeclaz/lafeclaz.php">Coupe de France La Feclaz</a></li>

Code html :

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

1
2
3
4
<ul>
	<li>
		<ul>
			<li><a href="../lafeclaz/lafeclaz.php">Coupe de France La Feclaz</a></li>

**laurentSc** · 12/06/2014, 20h56

Bien sûr que je la vois, ce que je ne vois pas, c'est pourquoi ça ne fonctionne pas dans le 2e cas, alors que selon moi, il n'y a rien d'interdit...

**Micmaya** · 13/06/2014, 01h26

Bonjour,
Supprime déjà tes balises:

Code :

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

1
2
3
4
5
<ul>
<li>
 
</li>
</ul>

Est-ce que maintenant tout s'affiche l'un à la suite de l'autre ?
Après quoi, dans le CSS on ajoutera "nth-child(n+5)" à l'élément "li" et cette ligne permettra de dire, tous les éléments de la liste à partir du cinquième (par exemple), et bien j'applique un code particulier.
Par exemple en mettant un "background-color" pour tester et si ça fonctionne, tu n'auras qu'à déplacer cette "2ème liste" à droite.
Vérifie juste la syntaxe de mon "nth-child(n+5)", parce que je ne suis plus sur

**laurentSc** · 13/06/2014, 19h40

Déjà merci infiniment de me répondre ; je n'ai pas reçu de notification alors que je suis abonné à la discussion et du coup, ne l'ai vu qu'à l'instant ; je l'ai tout de suite essayée, mais j'ai encore des soucis.

Déjà, si je retire les balises, comme tu dis, ça s'affiche bien (pourquoi y avait rien avant ?)

Et je continuerai mes essais plus tard...

**laurentSc** · 13/06/2014, 23h42

nickel car les listes de niveau 4 s'affichent sur 2 colonnes si elles sont trop longues par contre ce que je voudrais faire en plus, c'est affecter une hauteur différente à chaque liste
Voici le code CSS actuel où toutes les listes de niveau 4 ont la même hauteur de 220px :

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
#nav ul ul  {
	left: 181px;
	top: 0px;
	height:150px;
}
#nav ul ul ul{
	left: 181px;
	top: 0px;
	height:220px;
	width:300px;
}
 
#nav ul ul ul #idvideos14{
	height:50px;
}
 
#nav ul ul ul #idphotos14{
	height:150px;
}
 
#nav ul ul ul #idvideos13{
	height:80px;
}
 
#nav ul ul ul #idphotos13{
	height:80px;
}
 
#nav ul ul ul li:nth-child(n+5)
{
	background-color:#e7e5e5;   
	left: 300px;
	top: -210px;
}

avec

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
 
<ul id="nav">
<li><a href="#">Photos</a>
   <ul>
	<li><a href="#">Photos</a>
	    <ul >
		<li  id="idphotos14"><a href="#">Saison 2013/2014</a>
			<ul>
				<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>
			</ul>
		</li>
		<li id="idphotos13"><a href="#">Saison 2012/2013</a>
			<ul>
				<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>
		<li id="idvideos14"><a href="#">Saison 2013/2014</a>
	            <ul>
			<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 id="idvideos13"><a href="#">Saison 2012/2013</a>
		   <ul>
			<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>
    </ul>
 
</li>
<li...>etc.

**Micmaya** · 16/06/2014, 18h00

Salut,
En regardant le problème directement sur ton site, je te propose de modifier ceci:

Code :

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

1
2
3
4
5
#nav ul ul ul li:nth-child(n+5) {
  background-color: #e7e5e5;
  left: 300px;
  top: -160px;
}

Bien à toi,

**laurentSc** · 16/06/2014, 20h06

Merci pour ta réponse mais ça ne change rien, mais donne quand même ton raisonnement ; ça m'aidera peut-être à avoir de mon côté une autre idée...

**Micmaya** · 17/06/2014, 23h45

Je n'ai pas trop le temps pour le moment, mais j'ai fait ceci:

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
<!DOCTYPE html><html>
<head>
    <title></title>
    <style type="text/css">
    #menu {
        width: 600px;
        margin: 0 auto;
    }
    #menu > ul, #menu > ul > li > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #menu > ul > li {
        float:left;
        margin-right: 1px;
    }
    #menu > ul > li > a, #menu > ul > li > ul > li > a {
        width: 105px;
        display: block;
        background-color: #c00;
        color: #fff;
        font: 1em "Trebuchet MS", Arial, sans-serif;
        line-height: 1em;
        text-align: center;
        text-decoration: none;
        padding: 5px;
    }
    #menu > ul > li > a { background-color: orange; }
    #menu > ul > li > a:hover, #menu > ul > li > ul > li > a:hover {
        background-color: #900;
        text-decoration: underline;
    }
    #menu > ul > li > a:hover {    background-color: green; }
    #menu > ul > li > ul { display: none; }
    #menu > ul > li > ul > li {    margin-bottom: 1px; }
    #menu > ul > li > ul > li:first-child { margin-top: 1px; }
    #menu > ul > li > ul > li:nth-child(n+6) {
        position: relative;
        left: 116px;
        top: -135px;
    }
    #menu > ul > li:hover > ul { display: block; }
    #menu > ul > li:hover > ul > li { float: none; }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a>
                <ul>
                    <li><a href="#">SubItem 2.1</a></li>
                    <li><a href="#">SubItem 2.2</a></li>
                    <li><a href="#">SubItem 2.3</a></li>
                    <li><a href="#">SubItem 2.4</a></li>
                    <li><a href="#">SubItem 2.5</a></li>
                    <li><a href="#">SubItem 2.6</a></li>
                    <li><a href="#">SubItem 2.7</a></li>
                    <li><a href="#">SubItem 2.8</a></li>
                    <li><a href="#">SubItem 2.9</a></li>
                </ul>
            </li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
    </div>
</body>
</html>

Mais je ne suis pas très satisfait !
Je pense qu'il faudrait mettre les sous-items dans des divs, à creuser... mais comme je l'ai dis, je n'ai pas trop le temps (je suis sur un gros dossier qui vient de tomber au taf

), je laisse aux autres membres du forum de te répondre, je regarderai de temps en temps la conversation....

**laurentSc** · 18/06/2014, 20h02

Merci pour cet essai mais mon besoin de la discussion #14 reste. Et je préfère ne montrer aucun essai car en réalité je n'ai aucune idée que je juge valable. J'ai un peu enrichi le code de Micmaya, mais ça n'apporte rien à la discussion...

**Muchos** · 18/06/2014, 20h39

Perso, je ne comprends plus le besoin de base; ce qui prouve encore une fois que sur un forum, c'est un sujet pour un problème.

S'il s'agit de la liste sur deux colonnes, je répète qu'il vaut mieux faire une page dédiée et que, de toutes façons, l'arborescence du menu est trop profonde.
S'il faut quand même une telle liste, il ne faut pas la casser en deux mais utiliser CSS.

Je note aussi que les sélecteurs utilisés dans les codes précédents sont beaucoup trop compliqués. En outre, les ID sont à réserver pour les ancres.