{"id":251437,"date":"2023-01-02T14:57:00","date_gmt":"2023-01-02T11:57:00","guid":{"rendered":"https:\/\/inform.click\/modification-de-lelement-de-menu-actif-sur-le-defilement-de-la-page-a-laide-de-jquery\/"},"modified":"2023-01-02T15:15:00","modified_gmt":"2023-01-02T12:15:00","slug":"modification-de-lelement-de-menu-actif-sur-le-defilement-de-la-page-a-laide-de-jquery","status":"publish","type":"post","link":"https:\/\/inform.click\/fr\/modification-de-lelement-de-menu-actif-sur-le-defilement-de-la-page-a-laide-de-jquery\/","title":{"rendered":"Modification de l&rsquo;\u00e9l\u00e9ment de menu actif sur le d\u00e9filement de la page \u00e0 l&rsquo;aide de jQuery"},"content":{"rendered":"<p>\n  Ce didacticiel vous apprendra comment modifier l&rsquo;\u00e9l\u00e9ment de menu actif lors du d\u00e9filement de la page sans utiliser de fichiers js ou de plug-in sp\u00e9ciaux.\n<\/p>\n<p>\n  Dans cette d\u00e9mo, nous utiliserons des fonctions jQuery simples pour atteindre notre objectif.\n<\/p>\n<h5>\n  Production attendue:<br \/>\n<\/h5>\n<p>\n  Lors d&rsquo;un \u00e9v\u00e9nement de d\u00e9filement de page, l&rsquo;\u00e9l\u00e9ment de menu s\u00e9lectionn\u00e9 (actif) sera modifi\u00e9 en fonction de la section en cours de visualisation. Cela se produira \u00e9galement si l&rsquo;utilisateur clique sur l&rsquo;un des liens des \u00e9l\u00e9ments de menu. Ce type d&rsquo;impl\u00e9mentation est bon pour les sites Web \u00e0 une seule page ayant une barre de menu fixe. Commen\u00e7ons.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\">D\u00e9mo en direct<\/a>\n<\/p>\n<p>\n  Premi\u00e8re \u00e9tape&nbsp;: cr\u00e9er le balisage\n<\/p>\n<p>\n  Le balisage est tr\u00e8s simple et facile. Nous allons cr\u00e9er une barre de navigation simple avec quelques \u00e9l\u00e9ments de menu comme nous l&rsquo;avons sur www.instantshift.com. Il contient peu d&rsquo;\u00e9l\u00e9ments tels que Accueil, Web Design, CSS, Outils, Tutoriels, etc. La page comportera divers blocs de contenu textuel. Voici \u00e0 quoi ressemble le balisage.\n<\/p>\n<div id=\"maindiv\">\n  <code>\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div class=\"container clear\">\n    <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"sidebar\">\n      <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"checkdiv\"><\/div>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<nav class=\"\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<ul>\n          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#home\" class=\"active\"&gt;Home&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#webdesign\"&gt;Web Design&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#css\"&gt;CSS&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#tools\"&gt;Tools&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#tutorials\"&gt;Tutorials&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n        <\/ul>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/nav>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\n    <\/div>\n<p><!-- sidebar div end --><br \/>\n    <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"content\">\n      <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"home\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Home<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Home Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"webdesign\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Web Design<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Web Design Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"css\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>CSS<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- CSS Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"tools\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Tools<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Tools Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"tutorials\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Tutorials<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Tutorials Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\n    <\/div>\n<p><!-- contain div end --><br \/>\n    <code>\u00a0\u00a0\u00a0\u00a0<\/code>\n  <\/div>\n<p><!-- container div end -->\n<\/div>\n<pre><!-- maindiv end --><\/pre>\n<p>\n  <code>Notre balisage HTML est pr\u00eat maintenant, il est temps d'ajouter du style CSS.<\/code>\n<\/p>\n<h3>\n  <code>Deuxi\u00e8me \u00e9tape\u00a0: ajouter des classes CSS.<\/code><br \/>\n<\/h3>\n<pre><code>&lt;code&gt;body{\n      background-color:#520000;font-size:17px;\n}\n \n#maindiv{\n      background:#F4F3E8 url(images\/page_bg.webp);\n}\n \n#title h1 {\n     text-align: right;font-weight: bold;font-size: 25px;margin: 0;color:#fff;\n}\n \n.container {\n     width: 1000px;margin: 0 auto;padding: 38px 0;\n}\n \n#wrapper{\n     margin:0px auto;\n}\n \n#sidebar {\n    width:250px;float:left;\n}\n \n#content {\n   width:720px;float:right;padding-left:12px;\n}\n \n#title {\n   width: 900px;height: 60px;float: right;\n}\n \n.clear:after {\n   visibility: hidden;display: block;content: \"\";clear: both;height: 0;\n}\n \nnav {\n  width:213px;background-color:#030000;border: 2px solid #4F4D4D;padding:0 12px;\n}\n \nnav.stickydiv {\n   position: fixed;top: 0;z-index: 10000;margin-top:12px;\n}\n \nnav ul {\nlist-style-type:none;margin:0;padding:0;\n}\n \nnav li {\npadding:5px 10px;\n}\n \nnav li a {\ncolor:#fff;font-weight:700;line-height: 25px;\n}\n \na{\ntext-decoration:none;\n}\n \n.active {\ncolor: #F99;text-decoration: none;\n}\n \np{\nfont-family:Verdana,Arial,Helvetica,sans-serif;\n}\n \nfooter p{\n  color:#fff;\n}<\/code><\/code><\/pre>\n<h3>\n  Troisi\u00e8me \u00e9tape&nbsp;: v\u00e9rification du terrain de jeu \u00ab&nbsp;jQuery&nbsp;\u00bb.<br \/>\n<\/h3>\n<p>\n  Tout d&rsquo;abord, nous nous assurons qu&rsquo;en cliquant sur les liens du menu, la div correspondante doit d\u00e9filer vers le haut. Comme vous pouvez le voir dans le code ci-dessous, en cliquant sur le lien de l&rsquo;\u00e9l\u00e9ment de menu, nous supprimons la classe \u00ab\u00a0active\u00a0\u00bb de l&rsquo;\u00e9l\u00e9ment de menu actuellement s\u00e9lectionn\u00e9 et ajoutons la classe active au lien de l&rsquo;\u00e9l\u00e9ment cliqu\u00e9.\n<\/p>\n<p>\n  Ensuite, nous obtenons l&rsquo;ID de l&rsquo;\u00e9l\u00e9ment cliqu\u00e9. this.hash renverra \u00ab\u00a0#foo\u00a0\u00bb qui est le s\u00e9lecteur d&rsquo;ID. Par cons\u00e9quent, $(this.hash) est identique \u00e0 $(\u00ab\u00a0#foo\u00a0\u00bb) et il s\u00e9lectionnera l&rsquo;\u00e9l\u00e9ment avec l&rsquo;ID foo.\n<\/p>\n<pre><code>$('a[href^=\"#\"]').on('click', function (e) {\n        e.preventDefault();\n        $(document).off(\"scroll\");\n         \n        $('a').each(function() {\n            $(this).removeClass('active');\n        })\n        $(this).addClass('active');\n         var target = this.hash,\n         menu = target;\n        $target = $(target);\n               \n       $('html, body').stop().animate({\n            'scrollTop': $target.offset().top+2\n        }, 600, 'swing', function() {\n            window.location.hash = target;\n            $(document).on(\"scroll\", onScroll);\n        });\n    });<\/code><\/pre>\n<p>\n  Lors d&rsquo;un \u00e9v\u00e9nement de d\u00e9filement, nous v\u00e9rifions la position des \u00e9l\u00e9ments par rapport \u00e0 la quantit\u00e9 de d\u00e9filement ainsi que la somme de leur hauteur et de leur position. Sur cette base, nous ajoutons et supprimons la classe active des \u00e9l\u00e9ments de menu.\n<\/p>\n<pre><code>function onScroll(event){\n    var scrollPos = $(document).scrollTop();\n    $('#sidebar a').each(function () {\n        var currLink = $(this);\n        var refElement = $(currLink.attr(\"href\"));\n        if (refElement.position().top  scrollPos) {\n            $('#sidebar ul li a').removeClass(\"active\");\n            currLink.addClass(\"active\");\n        }\n        else{\n            currLink.removeClass(\"active\");\n        }\n    });\n}<\/code><\/pre>\n<p>\n  et dernier \u00e9v\u00e9nement de d\u00e9filement de page, nous v\u00e9rifions si la barre lat\u00e9rale sera collante ou non.\n<\/p>\n<pre><code>$(window).scroll(function(){\n        \/\/ the \"12\" should equal the margin-top value for nav.stickydiv\n        var window_top = $(window).scrollTop() + 12;\n        var div_top = $('#checkdiv').offset().top;\n            if (window_top &gt;= div_top) {\n                $('nav').addClass('stickydiv');\n            } else {\n                $('nav').removeClass('stickydiv');\n            }\n });<\/code><\/pre>\n<p>\n  Voici le script complet.\n<\/p>\n<pre><code>\n&lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\n\/\/&lt;![CDATA[\n\n$(document).ready(function () {\n$(window).scroll(function(){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var window_top = $(window).scrollTop() + 12;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ the \"12\" should equal the margin-top value for nav.stickydiv\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var div_top = $('#checkdiv').offset().top;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (window_top &gt;= div_top) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('nav').addClass('stickydiv');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('nav').removeClass('stickydiv');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\u00a0\n\u00a0\n\u00a0\u00a0$(document).on(\"scroll\", onScroll);\n\u00a0\n$('a[href^=\"#\"]').on('click', function (e) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(document).off(\"scroll\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('a').each(function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).removeClass('active');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).addClass('active');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var target = this.hash,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0menu = target;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$target = $(target);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('html, body').stop().animate({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'scrollTop': $target.offset().top+2\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, 600, 'swing', function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.location.hash = target;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(document).on(\"scroll\", onScroll);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});\n\u00a0\nfunction onScroll(event){\n\u00a0\u00a0\u00a0\u00a0var scrollPos = $(document).scrollTop();\n\u00a0\u00a0\u00a0\u00a0$('#sidebar a').each(function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var currLink = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var refElement = $(currLink.attr(\"href\"));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (refElement.position().top &lt;= scrollPos && refElement.position().top + refElement.height() &gt; scrollPos) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#sidebar ul li a').removeClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currLink.addClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currLink.removeClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n}\n\/\/]]&gt;\n&lt;\/script&gt;<\/code><\/pre>\n<p>\n  Voil\u00e0, c&rsquo;est facile non? Prendre plaisir! N&rsquo;oubliez pas de consulter la d\u00e9mo.\n<\/p>\n<h4>\n  D\u00e9mo en direct et code source<br \/>\n<\/h4>\n<p>\n  Ici, vous pouvez voir ce menu d&rsquo;action en action r\u00e9elle. En outre, vous pouvez t\u00e9l\u00e9charger les fichiers source afin de pouvoir les modifier et les utiliser directement dans tout ce que vous aimez.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\">D\u00e9mo en direct<\/a> &nbsp;<a href=\"http:\/\/www.instantshift.com\/assets\/downloads\/2014\/jquery-active-menu.zip\" target=\"_blank\" rel=\"noopener\">T\u00e9l\u00e9charger le code source<\/a>\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Source d&rsquo;enregistrement: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2014\/11\/14\/jquery-page-scroll-active-menu\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ce didacticiel vous apprendra comment modifier l&rsquo;\u00e9l\u00e9ment de menu actif lors du d\u00e9filement de la page sans utiliser de fichiers js ou de plug-in sp\u00e9ciaux. Dans cette d\u00e9mo, nous utiliserons des fonctions jQuery simples pour atteindre notre objectif. R\u00e9sultat attendu\u00a0: lors de l&rsquo;\u00e9v\u00e9nement de d\u00e9filement de page, l&rsquo;\u00e9l\u00e9ment de menu s\u00e9lectionn\u00e9 (actif) sera modifi\u00e9 en fonction de la section en cours de visualisation. Cela se produira \u00e9galement si l&rsquo;utilisateur clique sur l&rsquo;un des liens des \u00e9l\u00e9ments de menu. Ce type d&rsquo;impl\u00e9mentation est bon pour les sites Web \u00e0 une seule page ayant une barre de menu fixe. Commen\u00e7ons. Premi\u00e8re \u00e9tape : cr\u00e9ation du balisage Le balisage est tr\u00e8s simple et facile. Nous \u2026<\/p>\n","protected":false},"author":1,"featured_media":221850,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[223,119,145,54],"tags":[],"class_list":["post-251437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-manuels-scolaires","category-outils-web","category-trucs-et-astuces-web","category-web-et-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/comments?post=251437"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251437\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media\/221850"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media?parent=251437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/categories?post=251437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/tags?post=251437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}