article(s) dans votre panier VOIR

Utiliser le scrollspy pour activer les éléments du menu en fonction du scroll

  • Vidéo 23 sur 23
  • 2h58 de formation
  • 23 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Utiliser le scrollspy pour activer les éléments du menu en fonction du scroll
00:00 / 04:54
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tutoriel, l’auteur vous apprend comment utiliser le Scrollspy pour activer les éléments du menu en fonction du scroll dans Bootstrap. L’objectif de cette formation est d’optimiser la page web en fonction des menus du site. Pour ce faire, vous allez dans votre code HTML pour définir la disposition des menus. Dans cette tâche, vous allez fixer la barre de menus et par la suite le rendre actif lors d’un scroll. Dans un premier temps, vous fixez la barre de menus. Afin d’y parvenir, vous placez sur la commande class=«navbar» et faire en sorte que le code soit disposée de façon «navbar navbar-default navber-fixed-top». Après la sauvegarde de cette action, vous disposez un menu fixe sur le haut de l’affichage, même lorsque vous scrollez vers le bas de la page. Quant à l’activation des menus, vous revenez dans le code HTML et définir le lien puis le code convenable. Sur la Balise body, vous saisissez data-spy=«scroll» data-target=«mainmenu» et attribuer une id=«mainmenu» sur la commande class=«navbar». Afin de modifier le lien, il suffit de remplacer le nom déjà inscrit dans la commande de ce dernier. Par la suite, vous mettez une Ancre «#diaporama» suivi du code du lien. Cette Ancre permet à l’Id de rejoindre la div correspondante par un clic sur le lien Diaporama. Ainsi, vous sauvegardez votre action et vous actualisez la page web. De ce fait, lorsque vous scrollez sur la page qui correspond au lien, l’onglet Diaporama se met en surbrillance. Au final, vous avez un menu permanent sur le haut de l’affichage et qui s’active lors de la visualisation de son contenu.