How can I create page navigation that dynamically highlights the current page?
When displaying navigation to the user, it is a good idea to highlight the current page or section that user is currently viewing. This makes it easier for the user to see where they are in the site. There are a couple of ways this can be done, but here is a simple example. First, consider this simple menu:
<a href="/">Home</a><br>
<a href="/about.cfm">About Us</a><br>
<a href="/products.cfm">Products</a><br>
<a href="/press.cfm">Press Releases</a><br>
By looking at CGI variables, we can determine which page the user is on and highlight it within the navigation. This version simply add a bold tag to the link:
<a href="/"><cfif cgi.script_name is "/index.cfm"><b>Home</b><cfelse>Home</cfif></a><br>
<a href="/about.cfm"><cfif cgi.script_name is "/about.cfm"><b>About Us</b><cfelse>About Us</cfif></a><br>
<a href="/products.cfm"><cfif cgi.script_name is "/products.cfm"><b>Products</b><cfelse>Products</cfif></a><br>
<a href="/press.cfm"><cfif cgi.script_name is "/press.cfm"><b>Press Releases</b><cfelse>Press Releases</cfif></a><br>
This code could be modified to check for just a folder instead of a specific file name. That would then highlight the section that use is in rather than a specific page.
This question was written by Raymond Camden
It was last updated on November 24, 2006.