Organize and design a navigation bar for your site using CSS, Coldfusion and URL variables

In the previous lesson we have seen how to realize a navigation bar for our site using CSS, URL variables and PHP. Some people have asked to me how to realize the same navbar using Coldfusion. This is very easy and we can reuse the code written in the previous lesson for CSS page elements. Take a look first to this post for other details and repeat the Step 1 and Step 2. At step 2 open index.cfm in the site root and copy and paste the same code inside #navbar section changing the page's extension for the #navbar links from .php on .cfm:

<ul>
<li><a href="index.cfm?home">Home</a></li>
<li><a href="index.cfm?signup">Signup</a></li>
<li><a href="index.cfm?login">Login</a></li>
<li><a href="index.cfm?about">About</a></li>
</ul>

Step 3: add Coldfusion code into #main section
With Coldfusion we will use URL variables, <cfif> and <cfinclude> tags. Remember a Coldfusion URL variable is defined simply with this dotted code URL + . + 'varname' (URL.varname). Copy and paste this code into the #main section of our index.cfm page:

<div id="main">
<!-- If is defined an URL variable with value signup, logi or about: -->
<cfif isDefined('URL.signup')>
<cfinclude template="include/in-signup.cfm">
<cfelseif isDefined('URL.login')>
<cfinclude template="include/in-login.cfm">
<cfelseif isDefined('URL.about')>
<cfinclude template="include/in-about.cfm">
<cfelse>
<!-- else, in all other cases load home page -->
<cfinclude template="include/in-home.cfm">
</div>

How you can see the code is very similar to the code used with PHP in this post, and the conceptual structure is exactly the same.