Imbriquer des listes

**Alyzées** · 23/01/2014, 08h24

Bonjour à tous

Voilà, je me lance, puisque ça fait des jours que je cherche et teste le code.
mais......

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
<ul id="menu">
        <li><a href="#">nav_bar</a></li>
        <li>
                <a href="#">Categories</a>
                <ul>
                        <li><a href="#"></a></li><!--sous lists float-->
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                </ul>
        </li> <!-- Chaque catégories à son sous menu qui float au survole de la souris, Ces catégories sont cachées sous le nav_bar qui est lui invisible --> :mouarf:
        <li><a href="#">Categories2</a></li>
                                 <ul>
                        <li><a href="#"></a></li><!--sous lists float-->
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                </ul>
 
        <li><a href="#">Categories3</a></li>
 
 
 <ul>
                        <li><a href="#"></a></li><!--sous lists float-->
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                </ul>
        <li><a href="#">Categories4</a></li>
 
 
 <ul>
                        <li><a href="#"></a></li><!--sous lists float-->
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                </ul>
</ul>

chaque palier change de couleur du centre de la boite sans oublier le float left and right pour le repositionnemet. J'ai essayé plein de tuto mais je n'arrive à rien où ce n'est pas ce que je cherche.

Ce qui m'embete c'est je n'arrive pas à les imbriquée tous de façons à les faire flotter les uns aprés les autres.

Merci @ tous ! ^^

Ouai, Mon premier message. Yessssssssssssss!

**JefReb** · 23/01/2014, 09h11

Il faudrait quand même un peu plus de code (notemment le css) et utiliser
la balise [code] pour soumettre le code.

**JefReb** · 23/01/2014, 09h16

Voila la liste:

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
 
<ul id="menu">
<li><a href="#">nav_bar</a></li>
<li><a href="#">Categories</a>
    <ul>
        <li><a href="#"></a></li><!--sous lists float-->
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li> <!--Chaque catégories à son sous menu qui float au survole de la souris, Ces catégories sont cachées sous le nav_bar qui est lui invisible-->
 
<li><a href="#">Categories2</a>
    <ul>
        <li><a href="#"></a></li><!--sous lists float-->
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#">Categories3</a>
    <ul>
        <li><a href="#"></a></li><!--sous lists float-->
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#">Categories4</a>
    <ul>
        <li><a href="#"></a></li><!--sous lists float-->
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
</ul>

**Alyzées** · 23/01/2014, 18h57

Bonsoir JefReb

Excusez-moi, je ferais plus attention à l'avenir.

Merci bisûnûrs

Merci JeFReB, je vais encore creusé

Alyzées

**rodolphebrd** · 24/01/2014, 08h47

Envoyé par Alyzées

Merci bisûnûrs

..ou à son fantôme.

**JefReb** · 24/01/2014, 20h22

Bon comme j'ai galèré aussi pas mal sur les menus, je donne une solution perso pour un menu horizontal. Il y a peut être mieux, mais bon ...
J'utilise la balise <span> pour indiquer un sous-menu.

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
 
.hormenu       { margin:0; padding:0; /* marges extérieures et intérieures à zéro   */
                 list-style-type:none;/* suppression des puces                      */
                 text-align:center; } /* centrage du texte                          */ 
.hormenu       { margin-left:210px; } /* pour centrer un peu le menu dans la barre  */
.hormenu li    { float:left; }        /* alignement horizontal grâce au flottant    */
.hormenu li a  { display:block;       /* affichage en block                         */ 
                 width:144px; height:25px; line-height:25px; /* dimenssion          */
                 margin:0; padding:0; /* Marges extérieures haut et bas à 0px       */    
                 background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /*    Position absolu    */
.hormenu li ul {visibility:hidden; }    /* et Hop on cache les menus B et C         */
.hormenu li 	 { border-right:3px solid transparent;} /* espacement des éléments  */ 
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir                          */
.hormenu ul 	 { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
                   list-style-type:none;  /* suppression des puces                  */
                   text-align:center; }   /* centrage du texte                      */ 
.hormenu li ul    { width:144px; }        /* pour forcer le flottant verticalement  */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments  */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles       */
.hormenu li:hover ul     {visibility:visible; }  /* Hop, menu B et menu C visible   */
.hormenu li:hover ul ul  {visibility:hidden;  }  /* Hop, on cache le menu C         */
.hormenu li li:hover ul  {visibility:visible; }  /* Hop, le menu C devient visible  */
/*      Mais il faut décaler le sous-menu C pour                                    */
/*      qu'il ne chevauche pas un sous-menu B ou menu A                             */
.hormenu li ul ul { margin:-28px 0 0 144px ; } /* top 25px+3px  et left 144px       */
.hormenu li ul ul { border-left:3px solid transparent; }/*espacement gauche         */
/*        Une flèche est mise pour indiquer un sous-menu  verticalement             */
.hormenu span	  { display:block; overflow: hidden;
                    background:url("/images/icons/flechevn.gif") no-repeat bottom center; }
.hormenu li:hover >a>span    { background-image:url("/images/icons/flechevb.gif"); }
/*        Une flèche est mise pour indiquer un sous-sous-menu horizontalement       */
.hormenu ul span { background-image:url("/images/icons/flechehn.gif");
                   background-position: right center;} /* au lieu de bottom center  */
.hormenu ul li:hover >a>span { background-image:url("/images/icons/flechehb.gif"); }
/*   Changeons maintenant la couleur des sous-menus B en vert                       */
.hormenu li ul li a       { background:#0C6; color:#fff; }
.hormenu li ul li a:hover { background:#6F9; color:#060; }/*au passage de la souris */
/*   Changeons maintenant la couleur des sous-menus C  en rose                      */
.hormenu li ul ul  a       { background:#FCC; color:#F09; }
.hormenu li ul ul  a:hover { background:#FC9; color:#F30; }/*au passage de la souris*/
/* Mettons les sous-menus B et sous-menu C     un peu transparent                   */
.hormenu ul	           { opacity:0.92; filter:alpha(opacity=92); }

et le html un peu modifié:

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
 
<ul class="hormenu">
<li><a href="#"></a></li>
<li><a href="#"><span>Catégories</span></a>
    <ul>
        <li><a href="#">sous-catégorie</a>
        	<ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>        
        </li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li> 
 
<li><a href="#"><span>Categories2</span></a>
    <ul>
        <li><a href="#">Sous-catégorie 2</a>
			<ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>        
        </li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#"><span>Categories3</span></a>
    <ul>
                <li><a href="#">Sous-catégorie 3</a>
			<ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>        
        </li>
 
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#"><span>Categories4</span></a>
    <ul>
                <li><a href="#">Sous-catégorie 4</a>
			<ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>        
        </li>
 
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
</ul>

et le résultat ici: http://codepen.io/JefReb/pen/ibmod

**JefReb** · 24/01/2014, 20h39

Puisque je suis lancé, il y a aussi une solution pour menu vertical

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
 
ul.vermenu 			  { width:175px; } /* menu vertical      */
ul.vermenu,
ul.vermenu ul         { margin:0; padding:0; list-style:none; border: 1px solid  #000058;
                        background-color:transparent; }
ul.vermenu ul         { display:none; position:absolute; left:100%; top:0;}
ul.vermenu            { background-color:#adb1b3; }
ul.vermenu ul         { background-color:#adb1b3; }
ul.vermenu li:hover>* { display:block; }
ul.vermenu li:hover   { position:relative; }
ul.vermenu ul ul      { position:absolute; left:100%; top:0; }
ul.vermenu            { display:block; }
ul.vermenu li         { display:block; white-space:nowrap; margin:1px; }
ul.vermenu a          { display:block; vertical-align:middle; text-align:left; text-decoration:none; color:#000058; 
 						margin:0; padding:5px; background-color:transparent; border:1px solid transparent; }
ul.vermenu li:hover > a { background-color:#4b4f51; border:1px solid #000058; color:#fff; text-decoration:underline; }						
ul.vermenu span 	  { display:block; overflow:visible; padding-right:24px; }

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
 
<ul class="vermenu">
<li><a href="#"></a></li>
<li><a href="#"><span>Catégories</span></a>
    <ul>
        <li><a href="#">sous-catégorie a</a>
        	<ul>
                <li><a href="#"></a>sous-catégorie a</li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>        
        </li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li> 
 
<li><a href="#"><span>Categories2</span></a>
    <ul>
        <li><a href="#">Sous-catégorie 2</a>
			<ul>
                <li><a href="#"></a>sous-catégorie 2</li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>        
        </li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#"><span>Categories3</span></a>
    <ul>
                <li><a href="#">Sous-catégorie 3</a>
			<ul>
                <li><a href="#"></a>sous-catégorie 3</li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>        
        </li>
 
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#"><span>Categories4</span></a>
    <ul>
                <li><a href="#">Sous-catégorie 4</a>
			<ul>
                <li><a href="#">sous-catégorie 4</a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>        
        </li>
 
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
</ul>