Mise en page animée, Nouveautés de CSS

[Anard]

Bonjour à tous. Je viens vous voir pour un assistance cosmétique (et non pas cosmique).

Je suis en train de me remettre un peu au développement web. Depuis le temps que je n'y était pas venu, ça a bien bougé ! On peut maintenant faire des animations en CSS
Du coup pour mon nouveau site, je voudrais créer une interface adaptative et animée sans utiliser de javascript.

J'ai un menu principal "à la con" avec des chapitres principaux répartis autour d'une image. Le survol d'un chapitre doit faire apparaître un sous menu dans un genre de bulle, si possible de manière animée.
J'ai réussi à mettre en place quelques animations sur la couleur des liens, c'est déjà formidable.
Mais je n'arrive pas à faire apparaître ma box de manière progressive.

La construction du menu repose sur cette syntaxe :

Code

<dl><!-- élément de menu -->
    <dt><!-- titre du menu toujours visible, mais mobile-->
    <dd><ul><!-- sous-menu invisible au départ et qui doit apparaitre -->
        <li><!-- les différentes lignes du sous-menu -->

Pour faire apparaitre un <dd>, j'utilise dans mon css :

Code

dl:hover dd {
    display: inline-block;
}

Malheureusement, je n'arrive pas à animer cette appartition, même en indiquant au préalable

Code

dl dd {
    transition: display 1s;
}

En effet, il semble que la transistion doit s'appliquer à l'élément survolé et non à un sous-élément (en l'occurrence, je veux afficher le <dd> au survol du <dl> parent).
Je ne sais pas si je me fais bien comprendre...

Je découvres ces nouvelles fonctionnalités, alors votre aide serait la bienvenue...

Merci beaucoup. Pour plus d'informations, vous pouvez visualiser l'état des choses ici

[Philippe64]

Je t'ai fais un petit code pour que tu testes (je sais que ça marche j'ai testé de mon côté)
ce n'est pas parfait, mais c'est pour l'exemple.

Mais franchement, laisse tomber tous tes dt, dl et compagnie... simplifie ton code.
c'est le conseil que je peux te donner après 20 ans d'expérience (j'ai commencé en 1999 et c'est mon métier depuis)

ce sera d'autant plus simple pour basculer sur la version mobile (avec le même css)

Code

/* @override
    http://test.musiquesmagiques.fr/Styles/menu.css */

.menu {
    vertical-align: top;
    position: fixed;
    top: 180px;
}

#phono {
    display: none;
}

.menu, .menu a {
    text-decoration: none;
    color: black;
    max-width: 200px;
}

#curMenu, #curMenu a {
    color: #5e0505;
}

.menu dd {
    display: none;
    opacity: 0;
}

.menu dt, .menu dt a {
    font-weight: bold;
}

.menu dl ul {
    list-style-type: none;
    padding: 10px 0 0 0;
}

/* Petit phono */
.menu dt:not(#curMenu) img, .menu li:not(#curMenu) img {
    display: none;
}
.menu dt img, .menu li img {
    width: 20px;
    margin: 0px 5px;
    vertical-align: middle;
}
.menu dt#curMenu, .menu li#curMenu {
    magin: 10px 5px;
}

/* Cas de la page Accueil */
.corps .menu {    
    position: relative;
    top: auto;
    max-width: 100%;
}

.corps #phono {
    display: block;
    z-index: 1;
    padding-top: 20px;
}

.corps .menu li img {
    display: none;
}

#chapitres {
    position: absolute;
    top: 0;
    left: 240px;
    z-index: 2;
}

.corps .menu dl {
    position: relative;
    display: block;
    height: 40px;
    z-index: 1;
}

.corps .menu dt {
    display: block;
}

.corps .menu dd {
    vertical-align: middle;
    margin: 10px;
    display: block;
    position: absolute;
    left: 110px;
    top: -40px;
    width: 200px;
    transform: scale(0.2);
    transform-origin: 0 0;
}

.corps .menu ul {
    border: 1px inset black;
    border-radius: 10px;
    padding: 5px 15px;    
    background-color: #f3e2c7;
}

#menu0 {
    display: none;
}
#menu1 {
    left: 30px;
}
#menu2 {
    left: 55px;
}
#menu3 {
    left: 72px;
}
#menu4 {
    left: 85px;
}
#menu5 {
    left: 89px;
}

/* Animations */
.corps .menu dl {
    transition: margin-left 1s ease;
}
.menu dd {
    transition: opacity 1s ease, transform 1s ease;
}



.corps .menu dl:hover {
    margin-left: 20px;
    z-index: 10;
}
/*
.corps #menu0:hover {
    left: 20px;
}
.corps #menu1:hover {
    left: 50px;
}
.corps #menu2:hover {
    left: 75px;
}
.corps #menu3:hover {
    left: 92px;
}
.corps #menu4:hover {
    left: 105px;
}
.corps #menu5:hover {
    left: 109px;
}*/

.menu dt, .menu a {
    transition: color 0.2s ease-out;
}
.menu dt:hover, .menu a:hover {
    color: brown;
}

.corps .menu dl:hover dd, #openMenu {
    opacity: 1;
    transform: scale(1);
}
/*
.menu dl:hover dd, #openMenu {
    display: block;
}

.corps .menu dl:hover dd {
    display: inline-block;
}*/