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>

Afficher des sous-menus sur plusieurs lignes

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager