Ce didacticiel vous apprendra comment modifier l’élément de menu actif lors du défilement de la page sans utiliser de fichiers js ou de plug-in spéciaux.

Dans cette démo, nous utiliserons des fonctions jQuery simples pour atteindre notre objectif.

Production attendue:

Lors d’un événement de défilement de page, l’élément de menu sélectionné (actif) sera modifié en fonction de la section en cours de visualisation. Cela se produira également si l’utilisateur clique sur l’un des liens des éléments de menu. Ce type d’implémentation est bon pour les sites Web à une seule page ayant une barre de menu fixe. Commençons.

Démo en direct

Première étape : créer le balisage

Le balisage est très simple et facile. Nous allons créer une barre de navigation simple avec quelques éléments de menu comme nous l’avons sur www.instantshift.com. Il contient peu d’éléments tels que Accueil, Web Design, CSS, Outils, Tutoriels, etc. La page comportera divers blocs de contenu textuel. Voici à quoi ressemble le balisage.

Notre balisage HTML est prêt maintenant, il est temps d'ajouter du style CSS.

Deuxième étape : ajouter des classes CSS.

body{
      background-color:#520000;font-size:17px;
}
 
#maindiv{
      background:#F4F3E8 url(images/page_bg.webp);
}
 
#title h1 {
     text-align: right;font-weight: bold;font-size: 25px;margin: 0;color:#fff;
}
 
.container {
     width: 1000px;margin: 0 auto;padding: 38px 0;
}
 
#wrapper{
     margin:0px auto;
}
 
#sidebar {
    width:250px;float:left;
}
 
#content {
   width:720px;float:right;padding-left:12px;
}
 
#title {
   width: 900px;height: 60px;float: right;
}
 
.clear:after {
   visibility: hidden;display: block;content: "";clear: both;height: 0;
}
 
nav {
  width:213px;background-color:#030000;border: 2px solid #4F4D4D;padding:0 12px;
}
 
nav.stickydiv {
   position: fixed;top: 0;z-index: 10000;margin-top:12px;
}
 
nav ul {
list-style-type:none;margin:0;padding:0;
}
 
nav li {
padding:5px 10px;
}
 
nav li a {
color:#fff;font-weight:700;line-height: 25px;
}
 
a{
text-decoration:none;
}
 
.active {
color: #F99;text-decoration: none;
}
 
p{
font-family:Verdana,Arial,Helvetica,sans-serif;
}
 
footer p{
  color:#fff;
}

Troisième étape : vérification du terrain de jeu « jQuery ».

Tout d’abord, nous nous assurons qu’en cliquant sur les liens du menu, la div correspondante doit défiler vers le haut. Comme vous pouvez le voir dans le code ci-dessous, en cliquant sur le lien de l’élément de menu, nous supprimons la classe « active » de l’élément de menu actuellement sélectionné et ajoutons la classe active au lien de l’élément cliqué.

Ensuite, nous obtenons l’ID de l’élément cliqué. this.hash renverra « #foo » qui est le sélecteur d’ID. Par conséquent, $(this.hash) est identique à $(« #foo ») et il sélectionnera l’élément avec l’ID foo.

$('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
         
        $('a').each(function() {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
         var target = this.hash,
         menu = target;
        $target = $(target);
               
       $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 600, 'swing', function() {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });

Lors d’un événement de défilement, nous vérifions la position des éléments par rapport à la quantité de défilement ainsi que la somme de leur hauteur et de leur position. Sur cette base, nous ajoutons et supprimons la classe active des éléments de menu.

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#sidebar a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top  scrollPos) {
            $('#sidebar ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

et dernier événement de défilement de page, nous vérifions si la barre latérale sera collante ou non.

$(window).scroll(function(){
        // the "12" should equal the margin-top value for nav.stickydiv
        var window_top = $(window).scrollTop() + 12;
        var div_top = $('#checkdiv').offset().top;
            if (window_top >= div_top) {
                $('nav').addClass('stickydiv');
            } else {
                $('nav').removeClass('stickydiv');
            }
 });

Voici le script complet.

Voilà, c’est facile non? Prendre plaisir! N’oubliez pas de consulter la démo.

Démo en direct et code source

Ici, vous pouvez voir ce menu d’action en action réelle. En outre, vous pouvez télécharger les fichiers source afin de pouvoir les modifier et les utiliser directement dans tout ce que vous aimez.

Démo en direct  Télécharger le code source