javascript - tutorial - fusion builder wordpress



Comment conserver l'état du menu lors du rechargement de la page (1)

Vous pouvez enregistrer le statut du menu (et de la page) dans une variable localStorage. Au chargement de la page, vérifiez si la variable existe et définissez le statut correct du lien / de la page.

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

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

Étape 1. Au survol de la souris Lien 1 ----> il sera traduit 1.5em à droite (déjà défini);

Étape 2. Sur le lien 1, cliquez sur ----> le bouton de menu restera en place à la position déjà traduite (fait, grâce à @guest271314 ) sur la page rechargée également, jusqu'à ce qu'un nouveau bouton de menu soit cliqué (non défini). encore) et une autre page est chargée .

remarque: la section de code des boutons next / prev reste inchangée (ou peut être modifiée si cela est indispensable pour rester fonctionnelle).

note 2: Je dois mentionner qu'à la fin, la solution sera implémentée dans WordPress et non dans une page de site 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: à propos du commentaire de @Lars:

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

Également en ce qui concerne l'emplacement de stockage, ce n'est pas un problème d'enregistrer l'état localement, côté serveur, mais ce serait formidable si j'ai des avantages / inconvénients à prendre la bonne décision;

En fin de compte, si cela vous aide, vous pouvez utiliser ce lien en direct à titre d’exemple pour avoir une vue d’ensemble il existe un menu similaire à celui décrit ci-dessus et en ce qui concerne l'état, s'il y a un modèle qui pourrait être mis en œuvre ici, je serai heureux de le trouver





wordpress-plugin