Implementing Saved State Function On This Accordion Menu

Question

I am proficient using css and know almost nothing about JS / JQuery. I have read through many answers about Saving a menu's state with cookies or checking for the name of the page you are on but I can not figure out how to integrate the snipits of JS provided with the menu I am using here: http://cssmenumaker.com/menu/slabbed-accordion-menu (pretty straight forward menu)

Please be detailed or use the same vars in this menu as my problem has been understanding how/where to implement the functions to accomplish saving the menu's state.

virtical-menu-script.js

( function( $ )
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
    $(this).removeAttr('href');
    var element = $(this).parent('li');
    if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp();
    }
    else {
        element.addClass('open');
        element.children('ul').slideDown();
        element.siblings('li').children('ul').slideUp();
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp();
    }
});
$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

(function getColor() {
    var r, g, b;
    var textColor = $('#cssmenu').css('color');
    textColor = textColor.slice(4);
    r = textColor.slice(0, textColor.indexOf(','));
    textColor = textColor.slice(textColor.indexOf(' ') + 1);
    g = textColor.slice(0, textColor.indexOf(','));
    textColor = textColor.slice(textColor.indexOf(' ') + 1);
    b = textColor.slice(0, textColor.indexOf(')'));
    var l = rgbToHsl(r, g, b);
    if (l > 0.7) {
        $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
        $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
    }
    else
    {
        $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
        $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
    }
})();

function rgbToHsl(r, g, b) {
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0;
    }
    else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return l;
    }
});
} )( jQuery );

vertical-menu-styles.css

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
 margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 200px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 15px 20px;
border-left: 1px solid #1682ba;
border-right: 1px solid #1682ba;
border-top: 1px solid #1682ba;
cursor: pointer;
z-index: 2;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
background: #36aae7;
background: -webkit-linear-gradient(#36aae7, #1fa0e4);
background: -moz-linear-gradient(#36aae7, #1fa0e4);
background: -o-linear-gradient(#36aae7, #1fa0e4);
background: -ms-linear-gradient(#36aae7, #1fa0e4);
background: linear-gradient(#36aae7, #1fa0e4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
color: #eeeeee;
background: #1fa0e4;
background: -webkit-linear-gradient(#eca336, #1992d1);
background: -moz-linear-gradient(#eca336, #1992d1);
background: -o-linear-gradient(#eca336, #1992d1);
background: -ms-linear-gradient(#eca336, #1992d1);
background: linear-gradient(#eca336, #1992d1);
}
#cssmenu > ul > li.open > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #1682ba;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #424852;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}

index.html

  <div id='cssmenu'>
  <ul>
     <li><a href='#'><span>Home</span></a></li>
     <li class='default has-sub'><a href='#'><span>Products</span></a>
        <ul>
           <li class='active has-sub'><a href='#'><span>Product 1</span></a>
              <ul>
                 <li><a href='#'><span>Sub Product</span></a></li>
                 <li class='last'><a href='#'><span>Sub Product</span></a></li>
              </ul>
           </li>
           <li class='has-sub'><a href='#'><span>Product 2</span></a>
              <ul>
                 <li><a href='#'><span>Sub Product</span></a></li>
                 <li class='last'><a href='#'><span>Sub Product</span></a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='#'><span>About</span></a></li>
     <li class='last'><a href='#'><span>Contact</span></a></li>
  </ul>
  </div>

That is asking for an *awful* lot -- download some code, extract and start hunting through it. You'd do MUCH better if you could ask a more specific question... though there is a good chance that unless that code was designed to save state, you'll find it challenging to add that ability. IF there is an API you can call to set state -- which segment is open -- you can add a click handler to the according, save which segment was clicked, then on page load you can use the API to re-open that segment. — Jeremy J Starcher, Aug 27 '14 at 21:39
I know and I apologize. I just added the code to the post to cut down on the work. I've tried to do this on my own for hours now and am hoping someone will help but I understand it is asking a lot. My last resort is to find a different menu with the features I want already built in. — Cypher, Aug 27 '14 at 22:24

score 0 · Accepted Answer · edited May 23 '17 at 11:49

Alright, I'm not going to fully answer the question for you -- but I will give you a pile of tools that you can use to answer the question for yourself:

First On the click handler, get the Xpath to the element.

There is a nice question and answer here about how to get the xpath in JavaScript.

Then, you must save the xpath off in a persistent storage somewhere. Cookies are one option, as is local storage.

Second On page load, you just read that xpath you saved and re-open the menu at the correct element.

Since that code is using jQuery, it is a simple matter of using the xpath to get the actual DOM element.

Again, there is a very nice question and answer available.

Once you have the element, then you can simply call its click event.

Third May be needed.

I didn't look at the code to see if clicking on a nested element would open the outer elements. If so, you'll also need to open those up. I'd use the jQuery's parent method to walk back up the menu and open (click on) the elements till you reach the top.

This step, if needed, should be called between getting the xpath/element on step 2 and actually doing the click in step2.

Edit

Looks like the functions are calling 'slideUp' -- you may want to create a separate function to call that uses the simple show/hide so you don't get the animation on page load.

Implementing Saved State Function On This Accordion Menu

1 Answers1