• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 524
  • Last Modified:

Navigation Menu

I need to make a horizontal navigation-menu where an active-class is applied to the buttons with hrefs that match the current url, so I can style that anchor in a way that makes it stand out from the rest of the menu.

Here is the basic menu:

<div class="menu">
        <ul>
          <li><a href="index.aspx"><span>Home Page </span></a></li>
          <li><a href="services.aspx"><span>Services</span></a></li>
          <li><a href="portfolio.aspx"><span>Portfolio</span></a></li>
          <li><a href="about.aspx"><span> About Us </span></a></li>
          <li><a href="contact.aspx"><span> Contact Us</span></a></li>
        </ul>
      </div>

In other words, when a page loads, I want that page's corresponding menu item (button) to show an active class so visitors will know what the current page is.

Something in JQuery would be nice. Regular JS is also OK. I want to do this on the client.

Thank you

0
jaysch
Asked:
jaysch
1 Solution
 
SnarflesCommented:
Your list takes the user to a new asp page. Why don't you just do a check for the current page on there rather than attempting to use javascript on a now non existant page?
0
 
mcuk_stormCommented:
If you do the following, it will find the filename that you are currently on from window.location.pathname then it will find an anchor tag with that href set, find its parent (should be the li) and set a class of active on it. You can then style the active class through css or change the addClass('active') to something else to set the styles like .css({color: '#fff'});

Where it uses jQuery you can replace this with $ if you like.

jQuery('div.menu li a[href=' + window.location.pathname.match(/[^\/]+$/) + ']').parent().addClass('active');

Hope this helps,
0
 
jayschAuthor Commented:
Took a little more tweaking but this solution pointed me in the right direction.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now