CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Création d’un Menu Déroulant en CSS

Création d’un Menu Déroulant en CSS

Afficher un sous menu au survol de la souris
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à la Navigation Déroulante

Objectifs

Les objectifs de ce tutoriel sont de :
1. Comprendre la structure HTML des menus et sous-menus.
2. Maîtriser les sélecteurs CSS pour cibler les éléments précis.
3. Utiliser les propriétés de positionnement pour aligner les sous-menus.
4. Appliquer des transitions pour améliorer l'expérience utilisateur.

Résumé

Apprenez à créer un menu déroulant en CSS pour améliorer la navigation de votre site web et enrichir l’expérience utilisateur.

Description

Dans cette leçon, nous allons explorer la création d’un menu déroulant en CSS. Nous commencerons par la structure HTML avec des listes <ul> et <li>, puis nous ajouterons des sous-menus. Nous aborderons les sélecteurs CSS pour cibler spécifiquement les premiers <li> de notre <ul>, ainsi que l'utilisation des propriétés position (relative et absolute) pour un positionnement précis. Enfin, nous verrons comment appliquer des transitions et gérer la propriété visibility pour montrer et cacher le sous-menu au survol de la souris. Nous ajouterons également des effets visuels comme l'opacité pour une transition plus fluide lors de l’apparition du menu déroulant.

Ce tutoriel est conçu pour ceux qui cherchent à enrichir l’interactivité de leurs sites web avec des menus déroulants, offrant ainsi une expérience utilisateur plus intuitive et attractive.

Voir plus

Questions - réponses

Quel sélecteur CSS utilise-t-on pour cibler les premiers li d’une ul?
Le sélecteur adjacent (>) est utilisé pour cibler directement les premiers <li> d’une <ul>.
Quelle propriété CSS permet de cacher un élément tout en gardant sa place dans le flux?
La propriété visibility avec la valeur hidden cache un élément tout en gardant sa place dans le flux.
Quelles propriétés CSS sont utilisées pour la position absolue et relative?
Les propriétés position: relative pour le parent et position: absolute pour l’enfant sont utilisées pour un positionnement précis.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 4 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !