CODEWITHSUNDEEP
javascriptjquery
Alvaro Menéndez
Alvaro Menéndez

Reputation: 9012

How could I keep menu state when page refresh?

I have quite a simple vertical menu which is going to have many levels (online shop) It works as you can see in the snippet:

$(".boton-BB").click(function () {                   
  $(this).parent().find('> ul').toggle();                    
});
ul {
  list-style-type: none;
  padding:0;
  margin:0;
}
.boton-BB {
    display:inline-block;
    position:absolute;
    z-index:1;
    width:25px;
    height:20px;
    background-color:red;
    top:18px;
    right:30px;
    cursor:pointer; 
    }
.menu-lateral-BB {
    background-color:#939597; 
    font-size:15px; 
    line-height:50px; 
    font-weight:400;  
    min-height:600px;/*PROVISIONAL*/ 
    }
.menu-lateral-BB a {
    height:100%;
    width:100%;
    padding-left:20px;
    color:#fff;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right:30px;
    }
.menu-lateral-BB ul {
    width:100%;
    }
.menu-lateral-BB li {
    position:relative;
    width:100%;
    border-top:1px solid #d1d3d4;
    box-shadow: 0 -1px 0 0 #666;
    }
.menu-lateral-BB > ul > li:first-child {border-top:0px solid #d1d3d4; box-shadow: none;}
.menu-lateral-BB > ul > li:last-child {border-bottom:1px solid #666;box-shadow: 0 1px 0 0 #d1d3d4, 0 -1px 0 0 #666;}
.menu-lateral-BB > ul > li ul {display:none;}
.menu-lateral-BB > ul > li ul li a {padding-left:30px;}
.menu-lateral-BB > ul > li ul li ul li a {padding-left:40px;}
.menu-lateral-BB > ul > li ul li ul li ul li a {padding-left:50px;}
.menu-lateral-BB > ul > li ul li ul li ul li ul li a {padding-left:60px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="width:400px;position:relative;">
<div class="menu-lateral-BB">
  <ul>
  <li><a href="#">Categoria 3</a>
      <div class="boton-BB"></div>
      <ul>
        <li><a href="#">Subcategoria 1</a></li>
        <li><a href="#">Subcategoria 2</a></li>
      </ul>
    </li>
    <li class=""><a href="#">Categoria 1</a>
      <div class="boton-BB"></div>
      <ul>
        <li><a href="#">Subcategoria 1</a></li>
        <li><a href="#">Subcategoria 2</a>
          <div class="boton-BB"></div>
          <ul>
            <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>

The jQuery to make it work is quite simple as you just need to click on the red square to open next level.

But I would like to keep the state of the menu with as many "open" levels as the user had when page refreshes (click on the link).

I have tried to use some similar correct answers around with no success.

Is there a simple way to achieve this?

Upvotes: 0

Views: 216

Answers (1)

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3834

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.

Upvotes: 1

Related Questions