UL are here
In order to assign a “you are here” effect i jquery/css there are several steps.
Assuming that your URLs are fairly structured to match your navigation, assign each ul a class or (preferrably) ID to match the path.
i.e, if your urls are http://…/blog/… http://…/news/…, etc your uls would be
<ul id=’nav’>
<li id=’blog’></li>
<li id=’news’></li>
…
</ul>
then your jQuery would be
$(document).ready(function()
{
var currentPage = /http:\/\/[host]\/([a-zA-Z0-9]*?)\//.exec(document.location);
$(‘#nav’).children(‘#’+currentPage).addclass(‘current’)
}
You could carry it out to sub levels easily enough by expanding on the regex and further ‘children()’ calls in the jquery stack
$(‘#nav’).children(‘#’+currentPage).addclass(‘current’).children(‘[whatever selector]’).addclass(‘current’)
after that its just a matter of CSS.
This can also be done if your URLs are not symantec, by defining the currentPage variable manually at the top of each page, but that is slightly less dynamic.
2 years ago