Permettre à une sous-liste de se s'afficher progressivement

Hello !

Tu devrais pouvoir trouver ton bonheur sur cette page de démo – Explication + code correspondant

En 1 réponse, je trouves la solution o.O

Merci :D

Seulement, je ne comprends pourquoi on doit mettre max-height: 1000px; forcément à la place de height:1000px;

En dessous du code une explication est donnée :)

This approach uses a combination of transitioning max-height like in the second slide down example, but adds perspective and rotation to the transition. perspective gives us depth, where the lower the number is the "closer" the object appears which gives it a much more pronounced depth effect. Higher numbers would make the effect more subtle. rotate3d with a value of -90deg creates an effect where the element appears to have rotated away from you. Adding a transition to all of these results in the desired effect. Unfortunately this implementation only works with webkit, so only Chrome and Safari users get to see it.

Bon ok

Encore une chose que je ne saisis pas

Dans le slide down, il y a une ligne comme ca

.nav ul > li:hover ul li{
}

Cela sélectionne les listes à l'intérieur de sous-liste lorsqu'on passe la souris sur une liste contenu dans la liste?

Je ne saisis pas trop ...

Euh, c'est vraiment bizarre

J'ai fait le #slide down 2 et ca disparait pas comme dans le tuto

Voici le code HTML :

<ul id="menu-deroulant">
    <li><a href="#">Acerca de</a>
        <ul>
            <li><a href="propos/capitales.html">Capitales</a></li><br>
            <li><a href="propos/habitantes.html">Habitante</a></li>
        </ul>
    </li>
    <!-- -->
    <li><a href="#" >Informacion</a>
        <ul>
            <li><a href="informacion/bandera.html">Bandera</a></li><br>
            <li><a href="informacion/climat.html">Climat</a></li><br>
            <li><a href="informacion/moneda.html">Moneda</a></li>
        </ul>
    </li>
    <!-- -->
     <li><a href="#">Cultura</a>
        <ul>
            <li><a href="cultura/fiestas.html">Fiestas</a></li><br>
            <li><a href="cultura/cocinar.html">Cocinar</a></li><br>
            <li><a href="cultura/bailar.html">Bailar</a></li>
        </ul>
    </li>
    <!-- -->
    <li class="li"><a href="infos/infos.html">Mas infos</a></li>
</ul>

Voici le code CSS :

#menu-deroulant{ /* Le ul au complet, la liste au complet,  (mais pas les sous-listes  inclus dans les listes principales) doit */
    position: absolute;
    left: 400px;
    top: 100px;
    font-size: 20px;  /* Avoir sa police à 20px */
    font-family: Verdana; /* Doit avoir sa police d'écriture à Verdana */
    list-style-type: none; /*On enlève toutes les listes à puces */
    text-align: center; /* Le texte est aligné au centre, donc tous les listes sont au centre */
    padding: 0; margin: 0; /* Aucune marge dans toutes les listes, ni à côté d'eux */
    background-color: transparent; /*Pour que les espaces de la liste prennent la couleur du menu (nav) */
}

 #menu-deroulant ul{ /* Les sous listes dans la liste menu-deroulant, on quasi la même chose sauf l'espace dans le top que j'ai enlevé grâce à cela */
     font-size: 20px;  /* Avoir sa police à 20px */
    font-family: Verdana; /* Doit avoir sa police d'écriture à Verdana */
    list-style-type: none; /*On enlève toutes les listes à puces */
    text-align: center; /* Le texte est aligné au centre, donc tous les listes sont au centre */
    background-color: transparent; /* Position absolue sur toute la page, peut aller nimprte ou (tant que ca dépasse pas l'élément parent, à moins de mettre -pixel*/
    /* On l'enlève de la page en le mettant complètement à gauche */
   /* On définit la largeur des sous-liste (en dessous des listes) */
    list-style-type: none;
    margin:0;padding:0; /* Aucune marge dans toutes les listes, ni à côté d'eux */
    z-index: 1; /* Pour éviter que l'article du bas passe par dessus*/
}
#menu-deroulant li ul{
    position: absolute;
    left: 0;
    top: auto;
    z-index: 1;
}

#menu-deroulant a{ /* On stylise les liens/boutons maintenant ... */
    display: block; /* Display block pour modifier leur proportion */
    padding: 5px; /* Espace de 5px entre le texte et les bordures du haut*/
    background: #9b59b6; /* fond de couleur gris clair*/
    width: 130px; /* Largeur de 120px */
    height: 40px; /*Hauteur de 32 px */
    text-decoration: none; /* Pas de souligné en dessous des liens */
    color: #fff; /* La couleur des mots est bleu*/
    border-radius: 6px; /* Petit arrondi dans les bordures */
    line-height: 40px;
}

#menu-deroulant a:hover{
    background-color: #fff;
    color:#9b59b6;
}
nav #menu-deroulant  li {  /* Tous les li (même ceux à l'intérieur des autres li) */
   float: left;   /* Doivent flotter à gauche, (se mettre l'un près de l'autre)*/
   margin-right: 20px; /*Doivent avoir une marge de 20px à droite (pour espacer avec les autres li placé à droite) */
  position: relative;
}

#menu-deroulant li ul li {
    max-height: 0px;
    transition: max-height 700ms ease;
    overflow: hidden;
    background-color: transparent;
}
#menu-deroulant ul:before, #menu-deroulant ul:after{
    content: '';
    display: table;
}
#menu-deroulant ul:after{
    clear: both;
}
#menu-deroulant > li:hover ul li{
    max-height:150px; /*Pour placer automatiquement les sous menus là où ils sont sensés être */ 
}

Ca marche mieux mais ca fait pas la même chose que dans la démo :(

Finalement ca fonctionne, il fallait enlever les br que j'avais mis pour sauter une ligne à chaque fois

C'est bien sur les li qu'il faut mettre l'animation.

Merci!