0

I have a menu containing 2 item that pointing to 1 page, my question is how do i highlight the top level item according to where i click it.

<nav>
 <ul class="mainNavi" id="menu-main">
  <li><a href="#">Home</a></li>       
  <li><a href="#">Funding Guidelines</a>
    <ul class="sub-menu">
     <li><a href="#">Learning Institutions</a>
         <ul class="sub-menu">
           <li><a href="#">Who Is Eligible</a></li>
           <li><a href="#">What We Fund</a></li>        
         </ul>
     </li>       
     <li><a href="#">FAQs</a></li>
    </ul>
 </li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Donations</a>
     <ul class="sub-menu">
       <li><a href="#">Make Donation</a></li>
       <li><a href="#">Request for Tax Exempt Receipts</a></li>
       <li><a href="#">FAQs</a></li>
     </ul>
  </li>
 </ul>
</nav>

Referring to above i have two FAQ link, one under Funding Guideline and another one under Donation which both link to the same page. My problem is how to highlight the top-level menu when i click to the link under respective sub-menu, without highlighting the other one. What i have now is that when i click to the menu, it's highlighted both top level menu.

  • 1
    can we see the code you are using to do the highlighting? – Brooke. Mar 27 '12 at 6:51
  • @BandonRandon i've pointed out the css to change color for current-menu-item and current-menu-ancestor class. – ajapis Mar 29 '12 at 7:20
1

you're best bet may be to set a custom class for each of the FAQ links then do a simple jquery on click for that event.

0

Just had this problem today, here is how I've solved it.

You must prioritize 1 of the 2 links.

One must become the real page link that will be highlighted along with its top-level menu. The other link will become a short cut, and when you arrive at the FAQ page the real link will be highlighted rather than the shortcut.

To create the shortcut, create an external link in your menu, and use a Root-relative URL, and add a ? at the end. For example /faq?

This will prevent the .current-menu-item and .current-menu-ancestor classes from being applied on the shortcut version.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.