How to style current page child link and its parent in accordion nav menu?

1
votes

I've searched for an answer to my problem high and low but can't seem to find something that works. I'm new to jquery and code, so bear with me. I have a vertical accordion navigation menu with nested links. I provided a fiddle with what I have so far. Don't mind the squares next to 'shop' and 'about'. Here is what I have working so far:

  1. When I click on a parent menu in the accordion, it opens to an active state with the parent highlighted like I want it and the + sign turning in to a - sign. When I hover over a child link in the same parent menu it also highlights like the parent. Perfect.
  2. When I click on a child link and the new page loads, the accordion menu that the child was in remains open to indicate which menu I'm currently in. So far so good.

But here is where I run in to the problem...

  1. When I click on a child link and the new page loads, the accordion menu remains open BUT without the highlighted active state. I want the current child link AND it's parent element to both stay highlighted to show exactly which page I'm on.

    FIDDLE

I hope this all makes sense and I've provided enough information. I've tried many things, including changing my entire accordion menu. But nothing has worked. Please help!

Code:

$(document).ready(function () {

    $('#cssmenu > ul > li ul').each(function (index, e) {
        var count = $(e).find('li').length;
        var content = '<span class=\"cnt\">' + count + '</span>';
        $(e).closest('li').children('a').append(content);
    });
    $('#cssmenu ul ul li:odd').addClass('odd');
    $('#cssmenu ul ul li:even').addClass('even');
    $('#cssmenu > ul > li > a').click(function () {
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }
        if ($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;
        }
    });
});

$(document).ready(function () {
    if (window.location.href.indexOf("#shop-nikki-lexi") > -1) {
        $('.drop-link-1').closest(".sub-level-1").css("display", "block");
    }
});

$(document).ready(function () {
    if (window.location.href.indexOf("#about-nikki-lexi") > -1) {
        $('.drop-link-2').closest(".sub-level-2").css("display", "block");
    }
});
/* Base Styles */
 * {
    margin: 0;
    padding: 0;
}
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family:"open-sans";
    font-size: 15px;
    position: relative;
    text-transform:uppercase;
    text-align:left;
}
#cssmenu a {
    line-height: 1.3;
}
#cssmenu {
    width: auto;
    padding: 20px 0px;
}
#cssmenu > ul > li > a:link {
    padding-right: 40px;
    display: block;
    background: #000000;
    color: #f1f1f1;
    border-bottom:none;
    text-transform: uppercase;
}
#cssmenu > ul > li > a:visited {
    text-decoration: none;
    color:#f1f1f1;
}
#cssmenu > ul > li > a:focus {
    text-decoration: none;
    color:#f1f1f1;
}
#cssmenu > ul > li > a:hover {
    text-decoration: none;
    color:#808080;
}
#cssmenu > ul > li > a:active {
    text-decoration: none;
    color:#808080;
}
#cssmenu > ul > li > a > span {
    background: #000000;
    padding: 0;
    display: block;
    font-size: 15px;
    font-weight: 400;
}
#cssmenu > ul > li.active {
    border-bottom: none;
}
#cssmenu > ul > li.active > a {
    color: #808080;
}
#cssmenu > ul > li.has-sub.active > a {
    color:#808080;
}
#cssmenu > ul > li.active > a span {
    background: #000000;
}
#cssmenu span.cnt {
    display:none;
    position: absolute;
    top: 8px;
    right: 15px;
    padding: 0;
    margin: 0;
    background: none;
}
/* Sub menu */
 #cssmenu ul ul {
    display: none;
}
#cssmenu ul ul li {
    border: none;
    border-top: 0;
}
#cssmenu ul ul a {
    padding: 2px 0 2px 22px;
    display: block;
    color: #f1f1f1;
    font-size: 12px;
    background-color:#000;
}
#cssmenu ul ul {
    padding:5px 0px;
}
#cssmenu ul ul a:hover {
    color: #808080;
}
#cssmenu ul ul li.odd {
    background: #f4f4f4;
}
#cssmenu ul ul li.even {
    background: #fff;
}
#shop:before {
    content:"\e708 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
}
#cssmenu > ul > li.active > a span#shop:before {
    content:"\e707 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
}
#cssmenu > ul > li.has-sub {
    margin-left:-2px;
}
.current-menu:before {
    content:"\e707 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
    color:#808080;
}
#cssmenu > ul > li > a.selected {
    color:#808080;
}
#copy {
    font-size:10px;
    opacity:.4;
    position:absolute;
    bottom:0;
    text-align:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='cssmenu'>
    <ul>
        <li><a href='/'><span>Home</span></a>

        </li>
        <li class='has-sub'><a href='#shop-nikki-lexi'><span id="shop">Shop</span></a>

            <ul class="sub-level-1" style="display:none;">
                <li><a class="drop-link-1" href='/products/#shop-nikki-lexi'><span>All Products</span></a>

                </li>
                <li><a class="drop-link-1" href='/category/apparel-tops/#shop-nikki-lexi'><span>Tops</span></a>

                </li>
                <li class='last'><a class="drop-link-1" href='/category/apparel-bottoms/#shop-nikki-lexi'><span>Bottoms</span></a>

                </li>
            </ul>
        </li>
        <li class='has-sub'><a href='#about-nikki-lexi'><span id="shop">About</span></a>

            <ul class="sub-level-2" style="display:none;">
                <li><a class="drop-link-2" href='/the-story/#about-nikki-lexi'><span>The Story</span></a>

                </li>
                <li class='last'><a class="drop-link-2" href='/faq/#about-nikki-lexi'><span>FAQ</span></a>

                </li>
            </ul>
        </li>
        <li class='last'><a href='/contact-nikki-lexi'><span>Contact</span></a>

        </li>
    </ul>
</div>
2
javascriptjqueryhtmlcssaccordion

2 Answers

0
votes

Because you are on a new page, simply include the class as part of the html of that list items that correspond to the page. No need for script to set the initial classes. For simplicity's sake

//Shop All Products Page
    <ul>
        <li class="active">All Products</li>
        <li>Tops</li>
        <li>Bottoms</li>
    </ul>

//Tops Page
    <ul>
        <li>All Products</li>
        <li class="active">Tops</li>
        <li>Bottoms</li>
    </ul>
0
votes

If you use a hash to change the URL you can make something like this:

window.onhashchange = activateMenu; // when url changes but not the page
(function() { activateMenu() })(); // when the DOM is loaded (document ready)

function activateMenu() {

  // read the hash (hash example: #work)
  var hashes = window.location.hash;
  // hide all submenus, here you must to define the correct selectors
  $('.all-your-menus').hide();
  //switch the submenu to show:
  switch(hashes) {
     case "#shop":
       $('.your-menu-selector-shop').show();
      break;

     case "#work":
       $('.your-menu-selector-work').show();
      break;

     default:
       // by default you can show one or hide all, you can choose :)
       $('.your-menu-selector-default').show();
      break;

  }


}

With this guide you can achieve that.