CODEWITHSUNDEEP
javascripthyperlinknavigation
Rich Coy
Rich Coy

Reputation: 545

Highlight Parent Navigation Item

I think I'm close on this but the main navigation item is only getting highlighted when on that actual page, not on any page below it.

The desired effect is if you are on the page for Sub A, Sub B, Sub C then Main Item 1 would get the .primary-link-active class applied to it indicating you are in that section of the site.

Here is a jsfiddle, though because the code is based off of the URL I don't think this can work in a fiddle.

http://jsfiddle.net/richcoy/knjteaoj/1/

I got most of the Javascript script off of another question here on Stackoverflow. Thanks for any help you can offer.

HTML

 <ul class="nav  site-nav">
    <li class="nav__item has-dropdown">
        <a href="#" class="nav__link  primary-link">Main Item 1<i class="icon-down-arrow small-text float--right mr-"></i></a>
        <div class="dropdown">
            <ul class="grid">
                <li class="grid__item  desk--one-third  dropdown--column">

                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub A</a>
                    </div>
                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub B</a>
                    </div>
                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub C</a>
                    </div>

                </li>

            </ul>
        </div>

    </li>

    <li class="nav__item has-dropdown">
        <a href="#" class="nav__link  primary-link">Main Item 2<i class="icon-down-arrow small-text float--right mr-"></i></a>


        <div class="dropdown">
            <ul class="grid">
                <li class="grid__item  desk--one-third  dropdown--column">

                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub D</a>
                    </div>
                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub E</a>
                    </div>
                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub F</a>
                    </div>

                </li>

            </ul>
        </div>

    </li>
</ul>

Javascript

$(function() {
 var url = location.pathname; // get current URL
 $('nav a.primary-link[href^="' + url + '"]').addClass('primary-link-active');
});

var $activeUL = $('.primary-link-active').closest('.primary-link');
/*
Revise below condition that tests if .primary-link-active is a submenu
*/
if($activeUL.attr('class') != 'primary-link') { //check if it is submenu
    $activeUL
        .parent() //This should return the li
        .children('a') //The childrens are <a> and <ul>
        .addClass('primary-link-active'); //add class active to the a    
}

Upvotes: 0

Views: 135

Answers (1)

Engin &#220;st&#252;n
Engin &#220;st&#252;n

Reputation: 1128

i think you dont really need div.dropdown, you can handle that with structure below:

<ul>
    <li><a></a></li>
    <li><a></a>
      <ul>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
      </ul>
     </li>
</ul>

anyway, try this:

html:

<ul class="nav  site-nav">
<li class="nav__item has-dropdown"> <a href="#" class="nav__link  primary-link">Main Item 1<i class="icon-down-arrow small-text float--right mr-"></i></a>

    <ul class="grid">
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="">Sub A</a>
            <ul>
                <li><a href="">link 1</a>
                    <ul>
                        <li><a href="tempfornow">link 3</a></li>
                        <li><a href="">link 4</a></li>
                        <li><a href="">link 5</a></li>
                        <li><a href="">link 6</a></li>
                    </ul>
                </li>
                <li><a href="">link 2</a></li>
            </ul>
        </li>
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub B</a>

        </li>
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub C</a>

        </li>
    </ul>
</li>
<li class="nav__item has-dropdown"> <a href="#" class="nav__link  primary-link">Main Item 2<i class="icon-down-arrow small-text float--right mr-"></i></a>

    <ul class="grid">
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub D</a>
        </li>
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub E</a>
        </li>
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub F</a>

        </li>
    </ul>
</li>

script:

$(function () {
    var url = 'tempfornow'; //location.pathname; // get current URL
    $('.nav a[href*="' + url + '"]').addClass('primary-link-active'); /*(1)*/
    $('>a',$('.primary-link-active').parents('li.nav__item')).addClass('primary-link-active'); /*(2)*/
});

what did we do:

  1. we select anchor which it contains 'url',
  2. we select anchor which in it parents of first selected anchor.

note: you used $('nav .blabla'), nav is a tag, but you have div with class nav, you can use with class selector like this $('.nav .blabla')

I hope it helps.

JsFiddle Demo
JsFiddle Demo-2

Upvotes: 2

Related Questions