Améliorez la Navigation de Votre Site Web

Fabriquer le menu - cosmétique du menu
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Créez vos thèmes WordPress 4.x
Revoir le teaser Je m'abonne
4,0
Transcription

49,90€ 24,95€ Je commande

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

DescriptionProgrammeAvis
4,0
49,90€ 24,95€ Je commande

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

Les objectifs de cette vidéo sont de rendre le menu de navigation fixe et d’ajouter une animation fluide au scroll pour améliorer la navigation de votre site web.

Apprenez à rendre le menu de navigation fixe et à ajouter une animation au scroll pour une meilleure expérience utilisateur.

Dans cette leçon, nous allons explorer deux améliorations majeures pour la navigation de votre site web. Tout d'abord, nous montrerons comment rendre le menu fixe en haut de la page, grâce à un simple snippet de code fourni par la bibliothèque Materialize. Ensuite, nous illustrerons la manière d'ajouter une animation au scroll en utilisant jQuery, ce qui permet une transition fluide vers l'article ciblé dans votre page.

Pour la navigation fixe, nous utilisons la classe navbar-fixed de Materialize, activée via une simple déclaration <div>. Après avoir enregistré et actualisé la page, nous pouvons constater que la navigation reste visible en permanence. Pour ajouter l'animation au scroll, nous intégrons un script trouvé en ligne qui uniformise le déplacement vers les ancres en douceur.

En adaptant ce script pour n'affecter que les liens de navigation (en utilisant nav.a), nous limitons l'animation au menu de navigation. En quelques lignes de code, nous avons transformé notre thème en one page fonctionnel, améliorant drastiquement l’expérience utilisateur.

Voir plus
Questions réponses
Pourquoi rendre un menu fixe est-il avantageux pour la navigation?
Un menu fixe améliore l'accessibilité et la facilité de navigation, permettant aux utilisateurs de se déplacer plus facilement sur le site sans avoir à faire défiler vers le haut.
Quel est l'avantage d'utiliser jQuery pour les animations au scroll?
Utiliser jQuery pour les animations au scroll permet des transitions fluides et personnalisables, améliorant l'expérience utilisateur en rendant la navigation plus agréable.
Qu'est-ce que la classe 'navbar-fixed' de Materialize fait précisément?
La classe 'navbar-fixed' de Materialize fixe la barre de navigation en haut de la page, la rendant visible en permanence même lorsque l'utilisateur fait défiler le contenu.

Programme détaillé

5 commentaires
4,0
5 votes
5
4
3
2
1
Natcol
Il y a 1 an
Bon pédagogue, dommage que la formation date
stevenchauvets
Il y a 3 ans
Pourquoi il n'y pas une vidéo qui montre comment importer le theme wordpress en ligne
stevenchauvets
Il y a 3 ans
Pourquoi il n'y pas une vidéo qui montre comment importer le theme wordpress en ligne
stevenchauvets
Il y a 3 ans
Pourquoi il n'y pas une vidéo qui montre comment importer le theme wordpress en ligne
stevenchauvets
Il y a 3 ans
Pourquoi il n'y pas une vidéo qui montre comment importer le theme wordpress en ligne