CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery Améliorer un Menu déroulant avec JavaScript et jQuery

Améliorer un Menu déroulant avec JavaScript et jQuery

Un menu déroulant avec transition
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery
Revoir le teaser Je m'abonne
4,3
Transcription
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,3
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à l'amélioration des menus CSS

Objectifs

Les objectifs de cette vidéo sont :

  • Apprendre à utiliser jQuery pour améliorer des éléments HTML.
  • Comprendre les concepts de base du masquage et de l'affichage d'éléments avec jQuery.
  • Améliorer l'expérience utilisateur en rendant les menus plus fluides.

Résumé

Découvrez comment transformer un menu déroulant HTML et CSS en un menu plus fluide avec JavaScript et jQuery.

Description

Dans cette vidéo, nous allons reprendre un menu déroulant déjà réalisé en HTML5 et CSS3, pour l'améliorer avec du JavaScript et du jQuery. L'objectif est de rendre le menu déroulant plus fluide, en utilisant des transitions de haut en bas plutôt qu'un affichage instantané. Nous commencerons par masquer le menu via un script jQuery pour ceux possédant JavaScript activé, et ensuite nous ajouterons des animations de type slide down et slide up pour une meilleure expérience utilisateur. Nous couvrirons également des aspects de compatibilité pour les utilisateurs sans JavaScript, en ajustant certains styles CSS.

Le script sera simple et comprendra la manipulation des enfants des éléments li pour montrer ou cacher les sous-menus de manière fluide. Grâce à cette amélioration, votre site deviendra plus professionnel et convivial.

Voir plus

Questions fréquentes

Quels sont les avantages d'utiliser jQuery pour les animations?
jQuery permet d'ajouter des animations de manière simplifiée et compatible avec tous les navigateurs, en utilisant moins de code que le JavaScript pur.
Pourquoi est-il important de prendre en compte les utilisateurs sans JavaScript?
Certaines personnes désactivent JavaScript pour des raisons de sécurité ou utilisent des navigateurs qui ne supportent pas bien JavaScript. En prenant ces utilisateurs en compte, nous assurons que tout le monde puisse naviguer sur le site.
Comment gérer l'affichage d'éléments en jQuery?
En jQuery, vous pouvez utiliser les méthodes .hide() pour masquer un élément et .show() ou .slideDown() pour l'afficher.

Programme détaillé

3 commentaires
4,3
3 votes
5
4
3
2
1
phbernard
Il y a 1 mois
Formation de bon niveau M Audoux est un professionnel.
Dommage que nous n'ayons pas les fichiers, par ailleurs M Audoux devrait également montré les fichiers CSS
D'autre par les fichiers JS à la version utilisée par M Audoux simplifieraient le travail de l'étudiant.
Azraël
Il y a 3 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.