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

[scoch]

@Philippe64 Bien d’accord pour limiter l’utilisation de l’attribut id.
Par contre, pas vraiment d’accord quand tu écris que les classes sont là pour simplifier la sélection d’éléments. C’est vrai que l’attribut class simplifie la sélection mais les sélecteurs avancés de CSS sont là pour ça aussi. Le principal avantage des sélecteurs avancés de CSS est d’éviter le mélange structure(HTML)/apparence (CSS) dans le code source HTML. Utiliser les sélecteurs avancés de CSS apporte également davantage de souplesse : cela peut permettre au web designer d’arriver à ses fins sans être complètement tributaire du code généré par le développeur web php par exemple (c’est flagrant dans le cas d’une refonte du design avec une structure HTML inchangée).

Dans le code HTML que tu as posté plus haut, il n’est pas compliqué de cibler les éléments en CSS sans utiliser les attributs class :

- le sélecteur .menu devient nav > ul
- le sélecteur .menu_element devient nav > ul > li
- le sélecteur .sous_menu devient nav > ul > li > ul
- et ses enfants directs li : nav > ul > li > ul > li

Attribuer un nom de classe à la nav peut être justifié dans le cas où il y aurait d’autres éléments nav, et pas de parent permettant de créer un contexte de sélection.
La version simplifiée du HTML et du CSS :

Code

<nav>
    <ul>
        <li>element menu 1
            <ul>
                <li>élément sous menu 1</li>
                <li>élément sous menu 2</li>
                <li>élément sous menu 3</li>
            </ul>
        </li>
        <li>element menu 2
            <ul>
                <li>élément sous menu 1</li>
                <li>élément sous menu 2</li>
                <li>élément sous menu 3</li>
            </ul>
        </li>
        <li>element menu 3
            <ul>
                <li>élément sous menu 1</li>
                <li>élément sous menu 2</li>
                <li>élément sous menu 3</li>
            </ul>
        </li>
    </ul>
</nav>

Code

nav > ul {
    margin: 1em;
    background-color: pink;
}
nav > ul > li {
    margin: 1em;
    background-color: gold;
}
nav > ul > li > ul {
    margin: 1em;
    background-color: cyan;
}
nav > ul > li > ul > li {
    margin: 1em;
    background-color: orange;
}