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

Click button to add a comment

Author

James Papaleo

Published

Wednesday 24 Oct 2007