javascript - tiempo - ingredientes para una buena barbacoa
Cómo mantener el estado del menú en la recarga de la página (1)
Tengo el siguiente fragmento de código y quería saber si existe la posibilidad de actualizarlo logrando este comportamiento del menú:
Paso 1. Al pasar el mouse sobre el Enlace 1 ----> se traducirá 1.5em a la derecha (ya configurado);
Paso 2. En el enlace 1, haga clic en ----> el botón de menú permanecerá fijo en la posición ya traducida (hecho, gracias especiales a @guest271314 ) en la recarga de la página también, hasta que se haga clic en un nuevo botón de menú (no establecido todavía) y se carga otra página .
nota: la sección del código de los botones siguiente / anterior, permanece sin cambios (o puede editarse si es necesario, para permanecer funcional).
nota2: Tengo que mencionar que al final, la solución se implementará en WordPress, no en una página estática de
html
.
$(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>
<a href="#" id="nextPage" class="hidden">Next</a>
<span id="msg"></span>
</div>
LE: con respecto al comentario de @Lars:
Este estado se aplicará a todos los usuarios (¿creo ?, es la mejor opción siempre que el menú se muestre en todas las páginas, sin condicionar por el tipo de navegador o la sesión);
También con respecto a la ubicación de almacenamiento, no es un problema guardar el estado localmente, del lado del servidor, pero será genial si tengo algunos pro / contras para tomar la decisión correcta;
Al final, si esto ayuda, para ver la imagen completa, puede usar este enlace en vivo como ejemplo ; hay un menú similar al descrito anteriormente y con respecto al estado, si hay un modelo que podría implementarse aquí, estaré encantado de encontrarlo.
Puede guardar el estado del menú (y la página) en una variable localStorage. Al cargar la página, verifique si la variable existe y establezca el estado correcto de Enlace / página.