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

[Anard]

Voilà, j'ai corrigé pour suivre vos conseils, en effet, je préfère toujours utiliser des balises adaptées quand je peux plutôt que de mettre des class et id.
Je ne me souvenais plus de nav par exemple.
J'ai donc mis à jour avec la structure que vous me conseilliez.

J'ai finalement décidé de n'utiliser que mon gros menu pour plus de simplicité. La version verticale (ou horizontale, je ne sais pas encore) sera utilisée, mais uniquement en vue adaptative pour les écrans limités en largeur.
Ca me parait plus logique au niveau de la navigation que le menu ne change pas de place en fonction de la page visitée...

Je voulais d'ailleurs éviter de mettre des class="menu" class="ssmenu" partout mais je crois que je vais être obligé.
Je m'explique : lors du survol d'un lien, je fais donc apparaître un mini phono à côté du lien. Pour le moment comme ceci :

Code

/* apparition petit phono */
nav li li img {
    transition: opacity 1s ease, transform 0.5s ease;
}
nav li li:hover img {
    transform: scale(1);
    opacity: 1;
}

Le "li li" ne sélectionne que les sous-menus. Pour obtenir la même chose pour tous les liens (menus et sous-menus), j'ai essayé :

Code

/* apparition petit phono */
nav li img {
    transition: opacity 1s ease, transform 0.5s ease;
}
nav li:hover img {
    transform: scale(1);
    opacity: 1;
}

Malheureusement, du fait de l'héritage en CSS, les sous-menus se retrouvent avec le petit phono sur chaque ligne... Je ne sais pas encore précisément comment lui demander de ne pas sélectionner les enfants mais j'espère pouvoir trouver avec des classes.

EDIT : j'ai trouvé une solution sans ajout de id et classes.
Mon img doit être le premier enfant du li et alors je peux le sélectionner par

Code

li > img

Les balises img suivantes ne sont pas prises en compte, même si elles sont également enfant du li.

Ce message a été modifié par Anard - 24 Jan 2019, 18:06.