[Solved] How to highlight the menu item in menu

Question

I guess what you want is to have class

ul.pureCssMenuSelected {
   //whatever the selection should look like
}

Then, in each html page you go to, you add that class to the option the page refers too.

<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui0"><a class="pureCssMenui0 pureCssMenuSelected" href="#">Home</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">About us</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Gallery</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact us</a></li>
</ul>

This because of course the html has no way of guessing what do you mean by selected item.

P.S.: Probably you probably don’t want to use an anchor link on that option.

P.P.S.: As others mentioned, if you are using the links in the same page, you need to use javascript. In jQuery, the code could be:

$('a').click(function() { 
    $('.pureCssMenuSelected').removeClass('pureCssMenuSelected');
    $(this).addClass('pureCssMenuSelected'); 
}

Also, add the class pureCssMenuSelected to the initally selected item, directly in the HTML. Finally, if you use this last solution, call it something other than pure CSS menu 🙂

Accepted Answer