Comment conserver l'état du menu en recharge de page

J'ai l'extrait de code suivant et je voulais savoir s'il est possible de le mettre à jour pour atteindre ce comportement de menu:

Étape 1. Sur le survol de la souris Lien 1 —-> il sera traduit 1.5em vers la droite (déjà configuré);

Étape 2. Sur le lien 1, cliquez sur —-> le bouton de menu restera fixé en place à la position déjà traduite (fait, remerciements spéciaux à @ guest271314 ) sur la page de rechargement aussi, jusqu'à ce qu'un nouveau bouton de menu soit cliqué (non réglé Encore) et une autre page est chargée .

Note: la section de codes des boutons suivants / prev, reste inchangée (ou peut être éditée si elle est un must, afin de rester fonctionnelle).

Note2: je dois mentionner qu'en fin de compte, la solution sera mise en œuvre dans wordpress pas dans un site Web html statique.

 $(function () { $('nav ul li').click(function (e) { //Set the aesthetics (similar to :hover) $('nav ul li') .not(".clicked").removeClass('hovered') .filter(this).addClass("clicked hovered") .siblings().toggleClass("clicked hovered", false); }).hover(function () { $(this).addClass("hovered") }, function () { $(this).not(".clicked").removeClass("hovered") }); var pageSize = 4, $links = $(".pagedMenu li"), count = $links.length, numPages = Math.ceil(count / pageSize), curPage = 1; showPage(curPage); function showPage(whichPage) { var previousLinks = (whichPage - 1) * pageSize, nextLinks = (previousLinks + pageSize); $links.show(); $links.slice(0, previousLinks).hide(); $links.slice(nextLinks).hide(); showPrevNext(); } function showPrevNext() { if ((numPages > 0) && (curPage < numPages)) { $("#nextPage").removeClass('hidden'); $("#msg").text("(" + curPage + " of " + numPages + ")"); } else { $("#nextPage").addClass('hidden'); } if ((numPages > 0) && (curPage > 1)) { $("#prevPage").removeClass('hidden'); $("#msg").text("(" + curPage + " of " + numPages + ")"); } else { $("#prevPage").addClass('hidden'); } } $("#nextPage").on("click", function () { showPage(++curPage); }); $("#prevPage").on("click", function () { showPage(--curPage); }); });

 .hidden { display: none; } body { font: normal 1.0em Arial, sans-serif; } nav.pagedMenu { color: red; font-size: 2.0em; line-height: 1.0em; width: 8em; position: fixed; top: 50px; } nav.pagedMenu ul { list-style: none; margin: 0; padding: 0; } nav.pagedMenu ul li { height: 1.0em; padding: 0.15em; position: relative; border-top-right-radius: 0em; border-bottom-right-radius: 0em; -webkit-transition: -webkit-transform 220ms, background-color 200ms, color 500ms; transition: transform 220ms, background-color 200ms, color 500ms; } nav.pagedMenu ul li.hovered { -webkit-transform: translateX(1.5em); transform: translateX(1.5em); } nav ul li:hover a { transition: color, 1200ms; color: red; } nav.pagedMenu ul li span { display:block; font-family: Arial; position: absolute; font-size:1em; line-height: 1.25em; height:1.0em; top:0; bottom:0; margin:auto; right: 0.01em; color: #F8F6FF; } a { color: gold; transition: color, 1200ms; text-decoration: none; } #pagination, #prevPage, #nextPage { font-size: 1.0em; color: gold; line-height: 1.0em; padding-top: 250px; padding-left: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="pagedMenu"> <ul style="font-size: 28px;"> <li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li> </ul> </nav> <div id="pagination"> <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp; <a href="#" id="nextPage" class="hidden">Next</a> <span id="msg"></span> </div>

LE: concernant le commentaire @Lars:

Cet état sera appliqué par tous les utilisateurs (je pense ?, c'est la meilleure option tant que le menu sera affiché sur chaque page, non conditionné par le type de navigateur ou la session);

En ce qui concerne l'emplacement de stockage, il n'y a pas de problème à enregistrer l'état localement, côté serveur, mais ce sera génial si j'ai des pro / contras pour prendre la bonne décision;

En fin de compte, si cela aide, afin de voir l'image entière, vous pouvez utiliser ce lien en direct comme exemple ; Il existe un menu similaire avec ce qui précède et concernant l'état, s'il existe un modèle qui pourrait être implémenté ici, je serai heureux de le trouver.

Vous pouvez enregistrer l'état du menu (et de la page) dans une variable de stockage locale. Sur la page, vérifiez si la variable existe et définissez le statut du lien / page correct.

https://github.com/julien-maurel/jQuery-Storage-API