How to Keep the Menu State on Page Reload

How to keep the menu state on page reload

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.com/julien-maurel/jQuery-Storage-API

Keep menu toggle state after page reload

This is the sort of thing I'd use localStorage for. Just set some kind of flag in localStorage when the state changes and fetch it when your page loads.

I should add that using css classes to represent view state isn't a good idea and will bite you if your UI gets much more complicated.

How could I keep menu state when page refresh?

I'd recommend using cookies.

$(".boton-BB").click(function() {
  var button = $(this),
    expires,
    days = 2, //Number of days for how long should the cookie stay
    data = new Date(),
    name = button.data('cat');

  if (button.hasClass("open")) {
    button.parent().find('> ul').hide();

    //delete cookie
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
  } else {
    button.parent().find('> ul').show();

    //set cookie
    data.setTime(data.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + data.toGMTString();
    document.cookie = name + "=" + val + expires + "; path=/";
  }
});

<div style="width:400px;position:relative;">
  <div class="menu-lateral-BB">
    <ul>
      <li>
        <a href="#">Categoria 3</a>
        <div class="boton-BB <?= isset($_COOKIE['cat3']) ? " open " : "closed "; ?>" data-cat="cat3"></div>
        <ul <?=i sset($_COOKIE[ 'cat3']) ? "style='display: block;'" : "style='display: none;'"; ?>>
          <li><a href="#">Subcategoria 1</a></li>
          <li><a href="#">Subcategoria 2</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Categoria 1</a>
        <div class="boton-BB <?= isset($_COOKIE['cat1']) ? " open " : "closed "; ?>" data-cat="cat1"></div>
        <ul <?=i sset($_COOKIE[ 'cat1']) ? "style='display: block;'" : "style='display: none;'"; ?>>
          <li><a href="#">Subcategoria 1</a></li>
          <li><a href="#">Subcategoria 2</a>
            <div class="boton-BB <?= isset($_COOKIE['subcat2']) ? " open " : "closed "; ?>" data-cat="subcat2"></div>
            <ul <?=i sset($_COOKIE[ 'subcat2']) ? "style='display: block;'" : "style='display: none;'"; ?>>
              <li><a href="#">sub-Subcategoria 1</a></li>
              <li><a href="#">sub-Subcategoria 2</a></li>
            </ul>
          </li>
          <li><a href="#">Subcategoria 3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Regards, KJ.

Menu active state remain on clicked link after the page reload

The following should be working:

var qs = decodeURIComponent(location.search);
$('a[href="' + qs + '"]').parents('li').addClass('active');

In location.search you will find the query-string which is appenden to your URL.

decodeURIComponent will decode your URL so it avoids e.g. the %20 for a whitespace.

$('a[href="' + qs + '"]') selects the a -tag which has a href-attribute corresponding to your query-string.

But I would recommend to remove the extra " from your url-parameters inside your href:

<ul id="nav">
    <li class="active"><a href="?field1=2&field2=test">products </a></li>
    <li><a href="?field1=3&field2=test2">products2 </a></li>
</ul>

If you can't remove the quotation marks you have to escape them for the attribute-selector to work.

---

Reference

location.search

decodeURIComponent

jQuery attribute selector

.parents()

.addClass()

Keep dropdown menu open after page refresh

First, I would check to see if there is a way to submit the form without a page refresh, by making the request asynchronously and prevent the default behavior of a page refresh.
So in your form submit, you can just do:
event.preventDefault()
And then handle the request asynchronously. That way, you will preserve your state.

But if you really need to do a page refresh for some reason, then I would perhaps use Local Storage for that. So, you can store some flag in the browser's local storage which checks to see if the drop down was in an open state, like:
localStorage.setItem('dropdownWasOpen', 'true');

And then whenever the page is refreshed, you read from the local storage again with localStorage.getItem('dropdownWasOpen').

Remember menu state on reload

You can do this is plain HTML and CSS. Assuming you have a structure like this:

- site
  + css
  + js
    index.html
    about.html

You can add a class to the body of each page, so index for index.php and about for about.php:

<body class="about">

Then in your menu, add an id (or a class if you plan on having the menu in many places) to each item that corresponds to the page:

<ul id="menu">
  <li id="index" class="active"><a href="index.html"></li>
  <li id="about"><a href="about.html"></li>
</ul>

Finally, using CSS you can style the menu items for each page specifically:

.index #index,
.about #about,
#menu .active {
  // styles for active item
}

Bootstrap 4 Sidebar menu to stay open on page reload

The solution I used for this is below.

$(document).ready(function () {
$('a').click(function() {

    var menuNumber = $(this).attr('href').slice(0, -1);
    //console.log(menuNumber);
    if (menuNumber == '#menu') {
        localStorage.setItem('collapseItem', $(this).attr('href'));
    }

    var menuHome = $(this).attr('href').slice(-9, -4);
    //console.log(menuHome);
    if (menuHome == 'index') {        
        localStorage.setItem('collapseItem', '');
    }
});

var collapseItem = localStorage.getItem('collapseItem'); 
if (collapseItem) {
   $(collapseItem).collapse('show')
}

// Clear local storage on menu close action
$('#sidebar .list-group > div').on('hide.bs.collapse', function () {
    localStorage.setItem('collapseItem', '');
})
})

I needed to be able to also clear localStorage if the Home link was clicked to prevent the menu from reopening on the last used submenu.
Also added is a check to clear the localStorage data if the arrow icon on the menu was used to close it.
Although it's unlikely that someone would close the accordion in this way and then refresh the page, I thought it better to be thorough.

---

Related Topics