I have the following code snippet and wanted to know if there is a possibility to update it achieving this menu behaviour:

Step 1. On mouse hover Link 1 ----> it will be translated 1.5em to the right (already set);

Step 2. On Link 1 click ----> the menu button will remain fixed in place at the already translated position (done, special thanks to @guest271314) on the page reload too, until a new menu button is clicked (not set yet) and another page is loaded.

note: next/prev buttons code section, remain unchanged (or can be edited if it's a must, in order to remain functional).

note2: I have to mention that in the end, the solution will be implemented in wordpress not into a static html sitepage.

$(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=".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>

I have the following code snippet and wanted to know if there is a possibility to update it achieving this menu behaviour:

Step 1. On mouse hover Link 1 ----> it will be translated 1.5em to the right (already set);

Step 2. On Link 1 click ----> the menu button will remain fixed in place at the already translated position (done, special thanks to @guest271314) on the page reload too, until a new menu button is clicked (not set yet) and another page is loaded.

note: next/prev buttons code section, remain unchanged (or can be edited if it's a must, in order to remain functional).

note2: I have to mention that in the end, the solution will be implemented in wordpress not into a static html sitepage.

$(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./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: regarding @Lars ment:

This state will be applied per all users (I think?, it's the best option as long as the menu will be displayed on every pages, unconditioned by the browser type or the session);

Also regarding the storage location, it's not a problem saving the state locally, server side, but it will be great if I have some pro/cons to make the right decision;

In the end, if this helps, in order to see the whole picture, you can use this live link as example; there is a similar menu with the above described and regarding the state, if there is a model that could be implemented here, I'll be glad to find it.

• javascript
• jquery
• html
• css
• wordpress

• 4 You're asking for state perseverance in a web environment. This es with a lot of considerations. For example, should this state be applied per browser/session/user/all users. You could save the state locally, server side or even make the state URL dependent (yoursite./link1 -> yourisite./link2). It's unclear what you kind of solution you're looking for. You might want to specify the use-case more clearly. – Lars Commented Sep 21, 2015 at 8:37
• oh I didn't know, thanks for your info ... As long as this is a menu of a public site, will be applied without restrictions (if that is the question) available for all users. I was thinking about this solution, utilizing $.holdReady() , history, made by @guest271314 but not so sure how can I apply the sequence in my snippet stackoverflow./a/30144363/4642215 . Also please have a look at this live example. This is what I'm looking for exept the fact that I can live without translate on click over the already translated position on hover. – typo_ Commented Sep 21, 2015 at 9:06
• regarding the above mentioned live example, in order to see the whole picture, try to navigate between works, books, etc menu items to see how they're acting. – typo_ Commented Sep 21, 2015 at 9:09
• 1 Took a quick look at the "live example" ... appears to me they use AJAX to load new content, and if so, you don't need to worry about keeping state between loads as the menu never gets reloaded ... this way you will be able to do almost anything with your menu's state with very little coding – Asons Commented Sep 23, 2015 at 17:36
• 1 You can do it through the database with variables if you want, which I find easier to do. – i am me Commented Sep 25, 2015 at 18:11

1 Answer 1

You can save menu (and page) status in a localStorage variable. On page load check if the variable exists and set correct Link/page status.

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