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

Par Lens Durandisse, il y a 11 ans

Les bases HTML/CSS

Bonjour au forum!!! <br>
Ici, j'ai créer une liste : #menu-deroulant, qui contient plusieurs listes, tel que Acerca de, Informacion etc.
Ces listes contiennent d'autre-liste (des sous-listes) que je voudrais faire apparaitre lorsqu'on passe la souris sur ces listes.

Ex : Je passe la souris sur Acerca de et cela m'affiche "Capitales et Habitantes"

J'ai utilisé une technique dans une video, en gros ce dont je voudrais, c'est que mes sous-liste, s'affiche progressivement lorsqu'on place sa souris sur une liste avec une propriété transition. Mais je crois que la méthode de faire disparaitre la sous-liste complètement normal et de la faire se repositionner automatiquement lorsqu'on place la souris dessus n'ira pas très bien

Une solution svp? <br><br>
Voici mon code HTML

<ul id="menu-deroulant"> <li><a href="#">Acerca de</a> <ul> <li><a href="#">Capitales</a></li><br> <li><a href="#">Habitante</a></li> </ul> </li> <!-- --> <li><a href="#" >Informacion</a> <ul> <li><a href="#">Bandera</a></li><br> <li><a href="#">Climat</a></li><br> <li><a href="#">Temperatura</a></li> </ul> </li> <!-- --> <li><a href="#">Cultura</a> <ul> <li><a href="#">Musica</a></li><br> <li><a href="#">Cocinar</a></li><br> <li><a href="#">Bailar</a></li> </ul> </li> <!-- --> <li class="li"><a href="#">Mas infos</a></li> </ul>

Voici mon 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 */ position: absolute; /* Position absolue sur toute la page, peut aller nimprte ou (tant que ca dépasse pas l'élément parent, à moins de mettre -pixel*/ left: -999em; /* On l'enlève de la page en le mettant complètement à gauche */ width: 130px; /* 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 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; } #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) */ } #menu-deroulant li:hover ul{ left:auto; /*Pour placer automatiquement les sous menus là où ils sont sensés être */ }

Désolé de vous demander autant de choses mais je suis nouveau en HTML et CSS (4 mois depuis que j'ai commencé) et je voudrais connaitre bien de choses

Bonne journée :)

PS : À moins que cela ne vous intéresse, ne lisez pas les commentaires ... Je comprends si peu que j'ai parfois besoin de bien comprendre mon code dans MES MOTS, donc cela me concerne seulement!

8 réponses

Lens Durandisse, il y a 11 ans

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

Merci :D

Lens Durandisse, il y a 11 ans

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

Antoine Courtin, il y a 11 ans

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.

Lens Durandisse, il y a 11 ans

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 ...

Lens Durandisse2, il y a 11 ans

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 */ }
Lens Durandisse2, il y a 11 ans

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

Lens Durandisse2, il y a 11 ans

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!