TP 14 : Interactivité : menu déroulant

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, on continue à faire des éléments interactifs en CSS, et notamment un menu déroulant.

Exercice 1 — Angry Birds et menus déroulants #

Adapté d’un exercice d’Hervé Le Crosnier

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW1-2022/TP14/ex1/angry-birds.html
(en remplaçant LOGIN par votre nom de login). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGINS" />
en remplaçant LOGINS par les noms de login des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Télécharger l'archive .zip de l'exercice, qui contient une page HTML, un fichier CSS, ainsi que des images. (Notez bien que les images sont réparties à deux endroits différents.) L'aspect de départ de la page peut être vu ici ; l'aspect final est dans la figure suivante.

Capture d’écran de la page
Capture d’écran de la page
(cliquer pour accéder à l’image pleine taille)

Vous devez compléter le fichier styles/angry-birds.css pour ajouter des éléments interactifs à la page (une bannière qui change au survol de la souris, ainsi qu'un menu déroulant) et des décorations.

En-tête

La bannière doit être composée d'une image de fond : styles/images/Angry-Birds.jpg. Quand la souris passe sur l'en-tête, on montre le bas de l'image et quand elle est en dehors de l'en-tête, le haut de l'image. Cherchez les propriétés qui permettent de décaler une image de fond par rapport à la boîte !

header quand hover
En-tête obtenu quand la souris passe sur l'image de fond

Menu déroulant

Le menu de navigation est un menu déroulant. Voici les images représentant les menus ouverts (cliquer pour voir en grand).

Capture du premier menu
Capture du deuxième menu
Capture du troisième menu

Pour réaliser cet effet, on va encore utiliser la pseudo-classe :hover. S'inspirer du tutoriel montré dans le cours.

Alternance des figures

Dans le CSS fourni, les figures flottent toutes à droite. On voudrait, comme sur le modèle, que la figure de la 2e section flotte à gauche (et ainsi de suite : si on ajoute plus tard des sections, on veut que les figures soient tantôt à droite, tantôt à gauche).

Mettez ceci en place sans modifier le HTML et sans utiliser de sélecteurs d'identifiant.

Ajouter aussi une bordure arrondie et une ombre aux figures, comme sur le modèle.

Décoration des titres de section

Les titres de section sont décorés par une image, qui n'est pas un élément de contenu (par exemple elle ne mérite pas de légende). Il faut donc utiliser une image en CSS.

Cependant, en regardant bien le modèle, on constate que ce n'est pas une simple image de fond, puisqu'elle repousse également le texte qui suit le titre. C'est bien un élément flottant, mais on ne veut pas l'ajouter dans le HTML.

En fait, on a utilisé le pseudo-élément ::before pour ajouter l'image dans le document : on a vu que la propriété content peut prendre une chaîne de caractères comme valeur, mais elle peut en fait aussi prendre l'URL d'une image (même syntaxe que pour background-image).