Pleaseee Help! Accordion Menu Remember State
I'm trying to get my menu to remember the state of the current page using a URL method and no cookies so that when the submenu item is clicked the acodian menu stays expanded while the user is viewing the subpages. Here is the code I'm trying to improve:
- <div id="primary-nav" data-selectname="Navigate to...">
- <div class="menu-navigation-container"><ul id="main-nav" class="menu"><li id="menu-item-11784" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11784"><a title="Interactive" href="#">Interactive</a></li>
- <li id="menu-item-12121" class="menu-item menu-item-type-post_type menu-item-object-gallery menu-item-12121"><a title="Print" href="#">Print</a></li>
- <li id="menu-item-15625" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15625"><a href="#">About</a></li>
- <li id="menu-item-20804" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-20802 current_page_item menu-item-20804"><a href="#">Services</a>
- <ul class="sub-menu">
- <li id="menu-item-20816" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20816"><a href="#">Graphic Design</a></li>
- <li id="menu-item-20815" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20815"><a href="#">Video Production</a></li>
- <li id="menu-item-20814" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20814"><a href="#">Web Development</a></li>
- </ul>
- </li>
- if(jQuery('body').hasClass('mobile')){ // Tablet Hover Fix
- jQuery("#main-nav li").each(function(){
- if(jQuery(this).children('ul').length){
- var link = jQuery(this).children('a');
- if(link.attr('href') == '#'){
- link.toggle( function() {jQuery(this).siblings('ul').slideDown("slow"); }, function() {jQuery(this).siblings('ul').slideUp("slow"); });
- }
- else{
- var firstClick = true;
- link.click(function(e){
- if (firstClick){
- jQuery(this).siblings('ul').slideDown("slow");
- firstClick = false;
- e.preventDefault();
- }
- });
- }
- }
- });
- }
- else{
- jQuery("#main-nav li").each(function(){
- if(jQuery(this).children('ul').length){
- jQuery(this).hoverIntent({
- interval: 10, /*Original Value 100*/
- over: navHoverIn,
- timeout: 9900, /*Original Value 300*/
- out: navHoverOut
- });
- }
- });
- }
-
-
- function navHoverIn () {
- jQuery(this).children('ul').slideDown("slow");
- jQuery(this).addClass("down");
- }
-
- function navHoverOut () {
- var menu = jQuery(this);
- jQuery(this).children('ul').slideUp("slow",function() {
- menu.removeClass("down");
- });
- }
-
- var defaultmenu = jQuery('#primary-nav').attr('data-selectname');
- jQuery('#main-nav').mobileMenu({
- defaultText: defaultmenu
- });
-
- jQuery.event.special.debouncedresize.threshold = 250;
I'm trying to impiment this section of code but keep getting syntax errors and I'm unsure of the ideal place to insert it.
// check URL for 'services' (may need to be refined to check a specific location // in the URL structure) if(window.location.href.indexOf("services") > -1) { // expand the UL below the LI containing that menu item $('a:contains("Services").parents('li').children('ul').show(); }