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.cfmSue @ 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
Thank you very much for this tutorial. It is exactly what I was looking for, the exactly correct approach. I am quite new to ColdFusion, so code like this help a lot. Now, I will try it but first have to make my own database definition.
Is there any chance you could really somehow send us the database definition? Is it the "cfdocexamples" table?
Thank you a lot!
ComboAlex @ Saturday 01 Aug 2009 - 07:31:45 AM
Oh, and BTW. As I see, here in this example we only have a two-level navigation. Am I right? Do you think we could use the same approach for N levels? Would that mean that we would have to modify the demo.cfm file to implement more levels? Would we have to write more nested cfif, cfloop and cfmenuitem tags in the code (in demo.cfm)?
My guess is that for N levels we would need a recursive code and we wouldn't be able to use cfmenu and cfitem tags.
Please someone tell me if I am on the right track.
Thank you a lot.
ComboAlex @ Saturday 01 Aug 2009 - 07:43:51 AM
Alex,
The example uses the cfdocexamples database installed with CF8.
I have expanded the menu to a third level, but not in the example. I did it by adding a grouping at the second level. Here's the code:
<cfmenu attributeCollection="#menu#">
<cfloop query="GetTopMenuRet">
<cfoutput>
<!--- create the top menu --->
<cfmenuitem name="#rereplace("#GetTopMenuRet.Category#"," ","-","ALL")#" display="#GetTopMenuRet.Category#" >
<!--- get the subitems for this top menu item --->
<cfinvoke component="#mypath#.#mycomponet#" method="GetSubMenu" returnvariable="GetSubMenuRet">
<cfinvokeargument name="myDSN" value="#application.DSN2#"/>
<cfinvokeargument name="myAccessLevel" value="#session.access#"/>
<cfinvokeargument name="myConcept" value="#session.concept#"/>
<cfinvokeargument name="myCatID" value="#GetTopMenuRet.catID#"/>
</cfinvoke>
<cfif GetSubMenuRet.recordcount gt 0> <!--- create the subitems under it --->
<cfset thisline = 1>
<cfloop query="GetSubMenuRet">
<!--- ********************************* --->
<cfif GetSubMenuRet.grpID gt 1 > <!--- this is a group --->
<!--- get the grps name --->
<cfinvoke component="#mypath#.#mycomponet#" method="GetMenuGrp" returnvariable="GetMenuGrpRet">
<cfinvokeargument name="myDSN" value="#application.DSN2#"/>
<cfinvokeargument name="myGrpID" value="#GetSubMenuRet.grpID#"/>
</cfinvoke>
<cfdump var="#GetSubMenuRet.grpID#">
<!--- Write the group menu heading- 2nd level --->
<cfmenuitem name="#rereplace("#GetMenuGrpRet.grpname#"," ","-","ALL")#" display="#GetMenuGrpRet.grpname#" >
<!--- get and loop the group --->
<cfinvoke component="#mypath#.#mycomponet#" method="GetGrpItemAccess" returnvariable="GetGrpItemsRet">
<cfinvokeargument name="myDSN" value="#application.DSN2#"/>
<cfinvokeargument name="myGrpID" value="#GetSubMenuRet.grpID#"/>
<cfinvokeargument name="myConcept" value="#session.concept#"/>
<cfinvokeargument name="myAccLev" value="#session.access#"/>
</cfinvoke>
<cfloop query="GetGrpItemsRet">
<!--- write the grp detail line - 3rd level --->
<cfmenuitem display="#itemname#" href="#itemurl#" />
</cfloop>
</cfmenuitem> <!--- close the group --->
<cfelse> <!--- no grp, just write 2nd line item --->
<cfmenuitem display="#subcategory#" href="#url#" />
</cfif><!--- END this is a group --->
<!--- ********************************* --->
</cfloop>
</cfif> <!--- END create the subitems under it --->
</cfmenuitem> <!--- top menu level --->
</cfoutput>
</cfloop>
<cfmenuitem display="Log Out" href="mycontrol.cfm?DoWhat=Logout" /> <!--- Static Logoff Option --->
</cfmenu>
Jim @ Monday 03 Aug 2009 - 10:04:09 PM
Hey! Thank you a lot. Will try this.
ComboAlex @ Tuesday 04 Aug 2009 - 06:01:19 PM
Hey there again! I am posting my problems in this forum. Here You can see what progress I made so far and maybe you can even give me some advice. :)
http://www.dreamincode.net/forums/index.php?showtopic=119043
Take care and thank you in advance if you might try to help me here. :)
ComboAlex @ Saturday 08 Aug 2009 - 08:07:26 AM
Alex,
Your code was truncated so I really couldn't follow it.
Jim @ Monday 10 Aug 2009 - 10:13:43 PM
No problem, cause I solved it finally. Here you can check the result.
http://www.dreamincode.net/forums/showtopic119348.htm
It is fully commented and can be interesting as an alternative way of making a navigation.
Would be very happy to read your comments, suggestions, improvements... anything.
AlecCombo @ Monday 10 Aug 2009 - 10:20:03 PM
BTW, here you can check an example of how my navigation works:
http://www.zkd-koper.si/index.php?page=drustva&item=46&grp=likovna_drustva
alexCombo @ Monday 10 Aug 2009 - 10:21:36 PM
Nice Tutorial! If possible can you post one for using CFMenu with CSS. Thx
Don @ Tuesday 06 Apr 2010 - 05:41:28 AM
ghjhgj
ghj @ Friday 09 Jul 2010 - 04:11:54 PM
There are various non profit credit card debt consolidation counseling services which help people.
Free Debt Consolidation Help
http://debtconsolidationfree.net/
Rumana Akter @ Friday 03 Sep 2010 - 03:00:02 PM
Click button to add a comment
Author
James Papaleo