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]

Je suis d'accord que ça fait beaucoup d'imbrications, c'est surtout pour me permettre de selectionner plus facilement tel ou tel élément ensuite. Aussi, j'essaie de respecter à la lettre les recommendations du W3C. Ce qui fait par exemple que je suis obligé d'insérer une balises dd dans une dl, même si le dd est vide...

Concernant les "display", en fait j'utilise un fichier Menu.php qui sera le même pour tout le site. En revanche, l'affichage n'est pas du tout le même sur la page d'accueil que sur les autres : sur la page d'accueil, le menu prend presque toute le place, entourant un gros phono (image) alors que sur les autres pages, ce sera un menu classique vertical sur le côté gauche avec un petit phono qui indique là où on est. Ca explique peut-être aussi certaines de ces imbrications bizarres... Sur le principe de mon code actuel, si les balises de menu sont incluses dans un "<div class="corps">, c'est qu'on est sur la page d'accueil, ce qui me permet de faire la différence sans PHP, juste en CSS.
Il y a donc dans mon "menu.css" l'ensemble des balises normales puis (à partir de "/* Cas de la page Accueil */") les corrections pour la page d'accueil.

Bref, je ne suis pas un warrior (le dernier site que j'ai fait remonte à 5-7 ans ) C'est d'ailleurs pour ça que je ressens profondément le besoin de vos conseils.

Pour le moment, pour contourner mon problème et que ça reste utilisable, lors d'un hover sur une balise dl, j'affiche le sous menu (dd) en opacité 0.1. Il suffit alors de positionner la souris sur la balise dd pour que l'opacité disparraisse (opacité 1 avec transition). Dans l'idéal, j'aimerais que ceci arrive dès le survol d'un élément dl.

Pour l'accessibilité du site en ligne, j'avais laissé la config locale de la base de données dans le fichier de configuration , c'est corrigé et la page d'accueil est maintenant visible. Ce sera sûrement plus clair.
J'ai fait évoluer un peu les choses depuis, mais il me reste des erreurs PHP à corriger avant de vous partager la suite Je suis en train d'essayer de mettre en place une première page qui n'est pas la page d'accueil. Ce sera aussi plus clair sur ce que je veux obtenir au final...

En tout cas merci de te pencher sur mon cas

Ce message a été modifié par Anard - 23 Jan 2019, 20:37.