Mike Marks Mike Marks - 5 months ago 10
jQuery Question

ApyCom JavaScript jQuery menu - how to show the currently selected navigation element?

I'm using ApyCom's jQuery navigation menu. It's working fine except when I click on a different navigation element, I expect that navigation element to remain highlighted to tell the user what page they're on. What's weird is if I replace the

href
value from an actual page (Contact.aspx, for example) to
#
, the selected element stays highlighted (of course, then I can't navigate to Contact.aspx because all it has is a
#
). It's only when I replace the
#
with an actual page is when this funkiness happens. Here's a screenshot of the Default.aspx page:

enter image description here

Now here's a picture of the Contact.aspx page (Contact Us):

enter image description here

Notice that "Home" is still highlighted. Here's my menu mark-up for the Contact.aspx page:

<div id="menu">
<ul class="menu">
<li><a href="Default.aspx" class="parent"><span>Home</span></a>
</li>
<li><a href="#" class="parent"><span>Services</span></a>
<div>
<ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div>
<ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div>
<ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul>
</div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul>
</div>
</li>
<li><a href="About.aspx"><span>About Us</span></a></li>
<li class="last"><a href="Contact.aspx"><span>Contact Us</span></a></li>
</ul>
</div>


Is there something I'm missing here?

Answer

I had to put class="current" on my <li> item. This resolved it.