Add Comment

ColdFusion 8 Dynamic Menu Tutorial

ColdFusion Tutorial #16

One of my pet peeves is that I can never find realistic working examples of CF code in the documentation. Yes there are many examples on CFMenu static code that demo the features, but my code shows how to build a dynamic menu from a database query using the cfdocexamples database installed with CF8.

demo.cfm

This is straight forward; it's just a nested loop with an attributes form at the bottom to show how the CFMenu attributes can easily be controlled. In my real life application I will allow my logged in users to control the visual aspects of the menu through a profile control panel and then load those settings into a session variable on login.

There are a couple of points that I discovered building the tutorial. First, you cannot have any spaces in the optional name field and second, I couldn’t get this to work inside the new CFDiv tag. The top level menu worked but the second level fly outs didn’t.

In a more advanced mode, I should note that CFMenu's style can be over written by using link css styesheets and allows for images (15 x 15) to be displayed on the menu items.

menu.cfc

This is a very simple component file with only two functions: a query for the main menu titles and another that returns the submenu titles and URL. Because I used a sample database, [cfdocexamples], I wasn’t able to return a true URL string since there isn’t one in that database so I used the email field as the URL. That is a simple field switch when a real database is used.

Demo

See this code running!

Download

Download this code as a zip!

Comments

The demo throws a CF error message when making option change and clicking change button: File not found: /tutorial/menusamp.cfm
Sue @ Wednesday 23 Apr 2008 - 06:24:24 AM

This has been fixed.
Dale Fraser @ Wednesday 23 Apr 2008 - 10:16:05 AM

Very nice and simple. I used this example to replace an existing word document that listed the names and links to our companies ColdFusion applications. I also added the ability to add new and update existing links from the page. Thank you for the tutorial.
Cameron @ Saturday 14 Jun 2008 - 06:51:22 AM

can you please provide the database definition
erik tsomik @ Thursday 28 Aug 2008 - 06:36:43 AM

v
Jack @ Thursday 23 Oct 2008 - 01:43:43 AM

When I put my example that I modified into Horizontal mode, it does not do the drop downs correctly, can you help if I send you my modified version?
thanks
Steve
Steve @ Tuesday 09 Dec 2008 - 07:33:45 AM

Steve,
Post your code and I'll take a look.
Jim @ Wednesday 10 Dec 2008 - 12:43:04 AM

sdfsd
dfsds @ Wednesday 25 Mar 2009 - 10:44:49 PM

Click button to add a comment

Author

James Papaleo

Published

Wednesday 24 Oct 2007