veces una tiempo tarda sol reutilizar reutilizables rellenar puede plastico para ingredientes hacerse encender cuanto cuantas como coccion buena brasa botellas botella barbacoa agua javascript jquery html css wordpress-plugin

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>&nbsp;&nbsp; <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.