One very important usability feature of a website is to have the menu or links highlight the current page the visitor is currently in. Here’s a trick I do with jquery to do just about that. For educational purposes, i’ve split it to 3 lines of code to make it more understandable.
Simply add the following to your header (don’t forget to include jquery first!).
$(document).ready(function()
{
var loc = window.location.toString().split("/")
loc = loc[loc.length - 1]
$("#navigation li a[href=\""+loc+"\"]").addClass("selected");
});
Of course, jquery isn’t really needed to do this. If you prefer to have it done _without_ jquery, here’s a native way of doing things:
window.onload = function()
{
var current_page = window.location.toString().split("/")[window.location.toString().split("/").length - 1]
var links = document.getElementsByTagName("a");
for (x in links)
{
var link = (links[x].href != undefined) ? links[x].href.toString().split("/")[links[x].href.toString().split("/").length – 1] : ""
if (link == current_page)
links[x].className = (links[x].className == "") ? "selected" : links[x].className + " selected"
}
}
_Important_: The above code takes use of the .selected class. Simply add the class to your a:hover classes.
#navigation ul li a:hover { color: #ff0; }
Should be written as:
#navigation ul li a:hover, #navigation ul li a.selected { color: #ff0 !important; }
_Don’t Forget!_, this works for menu/links with background images as well.
and that’s all there is to it! Don’t forget to thumb this up and share!
Related posts:
- Super Tip! How to Create that floating Facebook toolbar at the bottom of the page!
- How to: Fix OCUpload/One-Click Upload clicking bug in IE7 & IE8 (jquery)
- Unix Super Tip: How to CHMOD all your files recursively
- Super Tip: Pass Arguments in your Python Bindings using Lambda Functions
Still can't see what you're looking for?
argh… secret weapon huh!
hey mate,
ive tried both methods and neither are working. on my computer, i dont think its passing the ’selected’ property, because it changes the link correctly when hovering, but not when ’selected’. any ideas? could my external css with a, body, and any other tags be affecting it? cheers, alex.
hey mate,
ive tried both methods and neither are working. on my computer, i dont think its passing the ’selected’ property, because it changes the link correctly when hovering, but not when ’selected’. any ideas? could my external css with a, body, and any other tags be affecting it? cheers, alex.
Hi Alex, your best bet is to put: !important after the css attribute/properties’ value, this will make the value a priority thus preventing any other css from changing it.
ex:
#navigation ul li a:hover, #navigation ul li a.selected { color: #ff0 !important; }
hope that helps!
Hey,
Ive tried the above method, and I’ve made a few other changes (ive made your jquery function external), and it is working on all but the second menu item (issues).
Are you able to see (and help me fix) the problem?
Thanks again, Alex.
Hey,
I’ve found that if I delete references to other jquery javascripts it works fine.. do you know how I can stop them interfering?
Thanks, Alex.
Hey,
sorry to bombard you, but I’ve just gone with inline styles for that element only.. seems the easiest way to do it, and its valid with W3.
ISSUES
I found the js interference file and its too dense for me. Thanks for your help and of course the script!
Alex.
well that’s weird, maybe I should take a look at your website, do you have the url so I can take a look at it?
hey,
its steindependent.com and i eventually got it going. thanks heaps. it was simply that one of the other scripts was changing (or doing something) with the $, once I changed the $() to jQuery() it worked perfectly, and that has fixed a lot of other interference problems too. thanks.
alex.
Cool! Nice to see that worked for you =)
Awesome, works a treat. Saved me some hassle with css. Thanks