Highlight Selected Menu Item When On Page

so this has been driving me crazy all day, all i want is simply to highlight the current li when your on the corresponding page, excuse the mess but heres my code, HTML

Solution 1:

The simplest way to do this is create a class, let's say current, and assign it to that li element on each individual page. For example, your software.html file would look like this:

<li class="current">
    <a href="software.html">
        <span ...></span>SOFTWARE</a>
</li>
<li>
    <a href="frameworks.html">
        <span ...></span>FRAMEWORKS</a>
</li>

While your frameworks.html file would look like this:

<li>
    <a href="software.html">
        <span ...></span>SOFTWARE</a>
</li>
<li class="current">
    <a href="frameworks.html">
        <span ...></span>FRAMEWORKS</a>
</li>

Then just style .current accordingly

Solution 2:

you'll need to ID and class each of your LI's:

<li id="item1" class="menuitemOff">

Then in your CSS, create "off" state and "on" state for your LI's. Set the correct state for each.

You'll need the IDs if you want to change them later with JavaScript.

Solution 3:

You could do it dynamically by adding this on DOM ready:

$('.nav li').filter(function(){
   var page = $(this).children('a').attr('href');
   var url = window.location.pathname
   return (url===page);
}).addClass('pure-menu-selected');

You may need to tweak the url variable depending on your setup.

Here's a quick example: http://jsfiddle.net/2yLY8/

Share