Propriété

absolute

relative

block

pseudo class

::hover

La création d’un menu dynamique demande la maîtrise de nombreuses propriétés CSS.

Ce TD est donc très intéressant pour assimiler ces notions de base.

Menu^[1]

Prérequis

De nombreux pré-requis sont indispensables à la création de nouvelles fonctionnalités.

Code en action

Commençons par observer le prototype réalisé.

La figure suivante montre l'ergonomie et le comportement du menu que nous devons réaliser.

Les différentes catégories (Home, Services, …) sont affichées horizontalement.

Les sous menus apparaissent lorsque la souris est sur les catégories Services ou Publications.

Cahier des charges

La fonctionnalité du menu apparaît clairement dans l'image précédente.

Le cahier des charges pourrait s'énoncer ainsi : "Les sous-catégories apparaissent au survol des catégories".

Analyse

80% du travail va consister à mettre en place une stratégie.

Le reste du temps sera consacré à son implémentation^[2] en HTML et CSS.

🕐Rendu de l'analyse🕑

Je rappelle que cette étape peut être longue^[3].

Il vous faut imaginer le comportement sans forcément penser à l'implémentation.

J'ai choisi pour ma part d'illustrer les différents comportement à l'aide de dessins préparatoires.

vidéo : https://youtu.be/2l8J7FJOGGo

Voici un mémo (brouillon préparatoire ) des étapes essentielles.

Vue 3D

Voici deux vues en 3D avant la disparition des sous-menus :

🕥Implémentation

Après l'analyse vient le temps de la traduction des fonctionnalités en et .

Création de la liste

Pour créer les catégories et les sous-catégories du menu, nous pensons aux listes et sous-listes vues en cours.

Voici le code  d’une liste dans une liste.

Dans le code suivant, nous avons mis en avant une erreur d'écriture courante lors de la création des sous-listes.

1. <li><a href="/services/">Services</a> </li>
2. <ul>
3. <li><a href="/services/strategy/">Strategy</a></li>
4. <li><a href="/services/optimize/">Optimization</a></li>
5. </ul>

Le <li> de la ligne 1.  doit contenir la sous liste, c'est pourquoi la balise fermante doit être placée en ligne 6.

1. <li><a href="/services/">Services</a>
2. <ul>
3. <li><a href="/services/strategy/">Strategy</a></li>
4. <li><a href="/services/optimize/">Optimization</a></li>
5. </ul>
6. </li>

Déplacement de la liste interne

Voici le code pour rendre les balises <li> conteneurs^[4] pour le positionnement des sous-menus.

Notez la présence de la propriété position:relative qui permet de positionner les blocs.

Il est essentiel de comprendre l’utilisation de la propriété position: relative pour rendre le bloc "nav li" conteneur.

Dans cet exemple, supprimez^[5] la position relative des <li> dans la balise <nav>

Déplacement de la liste interne

Les sous menus positionnés en absolue peuvent facilement être déplacés en jouant sur la valeur top, left, right ou bottom.

Il est important de comprendre pourquoi la valeur de la propriété left doit être inférieure à 7em.^[6]

Effet "hover"

L'effet hover provoque l'apparition du bloc

Effet disparition

Effet apparition

Pour ceux et celles qui voudraient faire un effet !

Modifier cet exemple avec

Résumé

Travail personnel

Modifier le CSS pour afficher les sous-menus imbriqués.

Commencez à ajouter des sous-sous menus puis modifiez le

https://codepen.io/dupontcodepen/pen/oNYGGWB

The very bad new

Note d'utilisation : sur les écrans tactiles, :hover est problématique voire impossible. La pseudo-classe :hover n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils. (réf)