Création d'un Menu Masqué avec jQuery

Un menu masqué / affiché
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4
Revoir le teaser Je m'abonne
4,5
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de vous apprendre à :


  • Positionner et styliser un menu en CSS.
  • Utiliser jQuery pour gérer l’affichage et le masquage des menus et des pages.
  • Animer l’ouverture et la fermeture des menus.
  • Prévenir la propagation des événements de clic.

Découvrez comment réaliser un menu masqué qui s’ouvre et se ferme en utilisant jQuery et CSS.

Dans cette leçon, vous apprendrez à créer un menu masqué ou ouvert-fermé à l’aide de jQuery et de CSS. Nous commencerons par positionner le menu et définir ses styles de base. Ensuite, nous utiliserons jQuery pour capturer les clics sur le menu et sur les éléments de la page afin de gérer l'affichage et le masquage des pages du site. Nous détaillerons également comment utiliser les méthodes animate et stopPropagation pour gérer les animations et les événements de clics. Enfin, nous examinerons comment structurer notre HTML avec des div et des classes pour simplifier cette mise en œuvre.


En appliquant ces concepts, vous pourrez non seulement créer des menus dynamiques et interactifs, mais aussi améliorer la navigation et l’expérience utilisateur de vos sites web. Cette leçon vous fournira une compréhension plus approfondie des capacités de jQuery en matière de manipulation du DOM et d’interactions utilisateur.

Voir plus
Questions réponses
Quel est le rôle de la méthode jQuery <em>animate</em> dans cette leçon?
La méthode animate est utilisée pour animer la propriété 'left' du menu, permettant ainsi son ouverture et sa fermeture en douceur.
Pourquoi utilise-t-on la méthode <em>stopPropagation</em>?
La méthode stopPropagation est utilisée pour empêcher l’événement clic de se propager à d'autres éléments, en particulier pour éviter que le menu ne se ferme immédiatement après avoir cliqué sur un lien.
Comment le script jQuery différencie-t-il la page à afficher?
Le script jQuery utilise les identifiants des éléments de menu, récupère le chiffre associé à chaque page (1, 2, 3, 4) et sélectionne la page correspondante avec la méthode nth-child.

Programme détaillé

2 commentaires
4,5
2 votes
5
4
3
2
1
Azraël
Il y a 2 ans
Bonne formation.
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
lyazid.meaux
Il y a 4 ans
Très bonne formation, juste ce qu'il faut.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.

Merci.