Simple Easy CF Menu

Sometimes you just need a simple menu.
If your list of pages is very long, making a link with a class and an id, typing the href value for each, and inserting the link text all by hand can get old. And then, other than custom css on each page, marking a specific link with a special style, how do you show which link is the current page?

Here we set up a simple list of url/text pairs, and then loop through that list to create our links.

See the demo   See the code

Then - much like the popular javascript-based 'current page' menus - we look at the value of the link url, and the current page url (cgi.SCRIPT_NAME) - if they are the same, we have a winner. One other thing I find myself commonly wanting is a bit of special css on the first or last item in a list, so the code also assigns IDs to those links.

See the comments in the code for a look at how it works.
To use this, copy the code below into a file called 'menucode.cfm' (or whatever page name you fancy),
and then use <cfinclude template="menucode.cfm"> to call it into your pages.
Then grab the css and modify at will.

With a little experimenting, your list of url/text pairs can be created as the output from a cfquery,
or even from an xml sitemap by parsing the xml into page titles and urls.

This is just a simple start.. there are lots of ways to tweak and improve this for different uses.
For example, if your pages have dynamically generated urls, i.e. "details.cfm?productID=12", you could modify the comparison with cgi.SCRIPT_NAME to also use the cgi.QUERY_STRING variable.

This code also assumes your pages all have unique names.
If you have two pages named 'hosting.cfm' and 'sting.cfm', for example, you might want to alter the 'contains' comparison to 'is'.

Have fun and let me know what else you'd like this bit of code to do for you

The CF / HTML Code
CSS Styles