Working on a heavily-modified Cartweaver Coldfusion E-Commerce shopping cart site, I have created a database-driven navigation menu containing links to each category. When a user clicks a link, the products in that category are displayed, and the menu link for that category is highlighted via a special 'currentLink' css class.

Now of course I could use CF to add ' class="currentLink" ' to the current category's menu option, but I am not doing this particular menu that way. Besides, it is just as easy with jQuery!

view plain print about
1<cfif cgi.script_name contains 'results.cfm' AND isDefined('url.category') and url.category gt 0>
2<cfsavecontent variable="highlight">
3<script type="text/javascript">
4$(document).ready(function(){
5$('.sideNav li a').removeClass('currentLink');
6$('.sideNav li a[href=results.cfm?category=<cfoutput>#url.category#</cfoutput>]').addClass('currentLink');
7//end jQuery
8});
9</script>
10</cfsavecontent>
11<cfhtmlhead text="#highlight#">
12</cfif>

Simple enough - if we are on the 'results' page, and a category is defined in the url, remove the 'currentLink' class from all existing menu items, find the one where the 'href' attribute matches the current pagename and category, and add the class back to that link. Done.

The use of cfsavecontent and cfhtmlhead means I can put this right below the code that calls in my custom nav tag, for easy fine-tuning right where i need it (rather than in an external scripts file).

Quick , easy, and done in a flash with jQuery!