Raymond Camden's ColdFusion Blog: ColdFusion 8: AJAX UI Menus

ColdFusion 8: AJAX UI Menus

Continuing on with my tour of the new AJAX UI controls in ColdFusion 8, today I want to talk about menus. It seems like I've been building DHTML menus since before the dinosaurs walked the Earth, so it's nice to see this made a heck of a lot easier in ColdFusion 8. Let's get into it. At the simplest level, menus are made with the cfmenu and cfmenuitem tags:

view plain print about

<cfmenu bgColor="##c0c0c0">
	<cfmenuitem display="Item One" href="http://www.adobe.com" />
	<cfmenuitem display="Item Two" href="http://www.cnn.com" />
</cfmenu>

1  <cfmenu bgColor="##c0c0c0">
2      <cfmenuitem display="Item One" href="http://www.adobe.com" />
3      <cfmenuitem display="Item Two" href="http://www.cnn.com" />
4  </cfmenu>

This example creates a menu with two items. One that will show "Item One", and link to Adobe, and another one labeled "Item Two" that will link to CNN. I supplied an optional background color. By default the menu will be a normal horizontal menu. This creates the menu you see here. (I put some text under the menu so you could see it in context.) How do you create sub menus? Just nest the menu items!

view plain print about

<cfmenu bgColor="##c0c0c0">
	<cfmenuitem display="Adobe" href="http://www.adobe.com" />
	<cfmenuitem display="Products">
		<cfmenuitem display="ColdFusion" href="http://www.adobe.com/go/coldfusion" />
		<cfmenuitem display="Flash" href="http://www.adobe.com/go/flash" />
	</cfmenuitem>
</cfmenu>

1  <cfmenu bgColor="##c0c0c0">
2      <cfmenuitem display="Adobe" href="http://www.adobe.com" />
3      <cfmenuitem display="Products">
4          <cfmenuitem display="ColdFusion" href="http://www.adobe.com/go/coldfusion" />
5          <cfmenuitem display="Flash" href="http://www.adobe.com/go/flash" />
6      </cfmenuitem>
7  </cfmenu>

This example creates a submenu under a menu named Products. You can see this in action here. How about a vertical menu? Just add a type to the cfmenu tag:

view plain print about

<cfmenu bgColor="##c0c0c0" selectedItemColor="##ff0000" type="vertical" width="200">

1 <cfmenu bgColor="##c0c0c0" selectedItemColor="##ff0000" type="vertical" width="200">

I added a few things here. First the type="vertical". Then notice I also specified a highlight color for the menu. I think the red goes great with the gray. Next - since this isn't a menu going across the page, I supplied a width. I put this into a table and you can see the result here. Another option - you can supply images to go along with your menu items. These should (obviously) be smaller sized images. I'm using a Silk Icon in the next example:

view plain print about

<cfmenuitem display="ColdFusion" href="http://www.adobe.com/go/coldfusion" image="page_white_coldfusion.png" />

1 <cfmenuitem display="ColdFusion" href="http://www.adobe.com/go/coldfusion" image="page_white_coldfusion.png" />

Another modification you can make is to add dividers. This would be useful for breaking up a long menu into sections:

view plain print about

<cfmenuitem divider="true" />

1 <cfmenuitem divider="true" />

Demo here. So thats a quick look at cfmenu. I didn't cover everything (that's what docs are for!), but hopefully this will give you a taste of the control.

This entry was posted on Monday, June 18, 2007 at 4:08 PM. It was filed in the following categories: ColdFusion. It has been viewed 3,864 times and has 21 comments.

TweetBacks

Comments

[Add Comment] [Subscribe to Comments]

Comment 1 written by Scott P on 18 June 2007, at 6:59 PM

I played with it yesterday while watching Tiger miss putts and noticed a couple of minor things. If you see something that I overlooked in the docs, let me know.

The images are set as css background images. On a horizontal menu with more than a few items and images, the text may overlap the image some. You can over-ride the width by adding css for the name of the item, such as cfmenuitem name="foo" would be #foo {width:120px;}

I couldn't get the text to right or center align with the cfmenu style. Had to add in css for the element such as #foo {text-align:right}

On large menus, the menu shows up in vertical order then 'flashes' to horizontal. Think maybe this is lazyload but not sure.

Of you have a large amount of sub-menu items, the scrolling is slow.

And lastly, I see that showdelay is set to 200ms. Do you know how I can change that after the page is loaded?
Comment 2 written by Tomas Fjetland on 18 June 2007, at 7:17 PM

Very nice feature. Too bad it's nearly too ugly in Opera to use :(
Comment 3 written by Raymond Camden on 18 June 2007, at 9:57 PM

@ScottP - not sure. File an ER? :)

@Thomas - Ditto - file an ER. Adobe _does_ listen to bug reports.
Comment 4 written by duncan on 19 June 2007, at 4:35 AM

basic HTML markup problems with the generated content. This isn't valid:
<div id="_cf_menu1182244792322"

because all ids have to start with a letter.
Comment 5 written by Scott p on 19 June 2007, at 5:35 AM

Will do - think there is a already some of those on file but I'll dbl-check.
Comment 6 written by Doug S. on 19 June 2007, at 8:56 AM

Can these new menus in CF8 be built dynamically, for example, with data pulled from a query?
Comment 7 written by Raymond Camden on 19 June 2007, at 9:55 AM

I had no problem making dynamic menuitems.
Comment 8 written by Dave Ferguson on 19 June 2007, at 12:56 PM

Is it me or do the menus seem to have odd hide/display issues. I was playing around with submenus and the hide/display on them just does not seem consistant.

--Dave
Comment 9 written by Raymond Camden on 19 June 2007, at 1:00 PM

I didn't see that - but as always - file a bug. :)
Comment 10 written by BJ McShane on 17 September 2007, at 9:11 AM

It looks like the target attribute doesn't work correctly. When I add target="_blank" so that it will open a new window, the new window gets displayed behind the calling window.
Comment 11 written by Alex Hubner on 20 October 2007, at 2:42 AM

You can't use cfmenu/cfmenuitem with a recursive technique like those you reinvoke a .cfm file (using customtag or cfmodule) to build a multiple item menu.

Also, on IE (so far I found IE7), you can't finish a cfmenuitem block with a "cfmenuitem divider=true", it will throw a JavaScript error. You must finish with a "content" cfmenuitem. On Firefox, Safari and Opera runs fine.
Comment 12 written by richard brasier on 1 December 2008, at 6:53 PM

changing the height of the menu seems to be a bit of a pain.

i tried wrapping it in a div and it seems to work fine in firefox, but not in ie:
<div style="height: 30px;line-height:30px;">

<cfmenu bgColor="##c0c0c0">
<cfmenuitem display="Adobe" href="http://www.adobe.com"; />
<cfmenuitem display="Products">
<cfmenuitem display="ColdFusion" href="http://www.adobe.com/go/coldfusion"; />
<cfmenuitem display="Flash" href="http://www.adobe.com/go/flash"; />
</cfmenuitem>
</cfmenu>
</div>
Comment 13 written by Bill S on 1 May 2009, at 1:18 PM

Hi Ray, I have a web site using frameset. Could I manage to use cfmenu in the menu frame and post content in the content frame? Where could I found example/reference for this? Is this is not a good idea?

Thanks.

Bill
Comment 14 written by Raymond Camden on 1 May 2009, at 1:19 PM

I haven't tried, but the links for cfmenu can be _any_ link afaik, so you should be able to target the frame.

I just checked - cfmenuitem includes a target attribute.

So there ya go. :)
Comment 15 written by Bill S on 1 May 2009, at 1:40 PM

Thanks Ray. It works fine. Appreciate your help.
Comment 16 written by Clyde Conway on 4 June 2009, at 4:42 PM

Hi, how are you?
When using multiple cfmenus on a page, I've noticed that an additional carot is displayed (when displaying submenus) for each additional menu that is used. For example, in the following, there will be 2 carots in the top menu and one in the bottom. If I were to add a 3rd menu, there would be 3 carots in the top menu, and so on...

<cfmenu   name="menu" type="horizontal" bgcolor="##015A9C">
<cfmenuitem name="menuitem" display="Home" href="http://www.adobe.com"; />

<cfmenuitem name="Bagels" href="http://www.adobe.com"; display="Bagels">
<cfmenuitem name="Raisin" href="http://www.adobe.com";   display="Raisin" />
<cfmenuitem name="Garlic" href="http://www.adobe.com";   display="Garlic" />
</cfmenuitem>
</cfmenu>

<cfmenu   name="menu2" type="horizontal" bgcolor="##015A9C">
<cfmenuitem name="menuitem2" display="Home" href="http://www.adobe.com"; />

<cfmenuitem name="HotDogs" href="http://www.adobe.com"; display="Hot Dogs">
<cfmenuitem name="Nathans" href="http://www.adobe.com";   display="Nathans" />
<cfmenuitem name="Sabrett" href="http://www.adobe.com";   display="Sabrett" />
<cfmenuitem name="HebrewNational" href="http://www.adobe.com"; display="Hebrew National" />
</cfmenuitem>
</cfmenu>

Does anyone know where I can modify this? We have people who don't like the additional carots and would like to limit them to just one no matter how many menus are on the page. Thanks for any help you can give.
Comment 17 written by Clyde Conway on 9 June 2009, at 11:30 AM

Nevermind...I found the stylesheet
Comment 18 written by Chris on 19 June 2009, at 3:17 PM

Ray,
I have a mysql table to use for a menu that has an ID and parentID. For instance, I have a menu item called "Sports" and below it would be "Football". Football's parentID would be Sport's primary key ID. Football may also have items under it, such as "Playoffs", "Regular Season", etc. Those would then have the parentID of Football's primary key ID. Basically making the menu ever expandable.

I want to use cfmenu to build a horizontal menu, but have ran into a brick wall. Any ideas?
Comment 19 written by Raymond Camden on 21 June 2009, at 8:43 AM

You would need to use recursion. Write a function that gets the top level items, then the children, and so on, and so on.
Comment 20 written by Jody Fitzpatrick on 15 July 2009, at 3:09 AM

@Chris





<cfset menu         = StructNew() >
<cfset menu.typeid   = "mainmenu">


<cfquery datasource="#application.datasource#" name="getMenu">
SELECT * FROM menu WHERE
   menutype   = <cfqueryparam value="#menu.typeid#"> ORDER by order_id asc;
</cfquery>


<cfmenu bgColor="##eeeeee" selectedItemColor="##ffffff">


   <cfloop query="getMenu" startrow="1" endrow="1000">
      <cfmenuitem display="#title#" href="http://www.google.com">;

      

<cfquery datasource="#application.datasource#" name="getSubMenu">
SELECT * FROM menu WHERE
menutype    = <cfqueryparam value="sub.#menu.typeid#"> ORDER by order_id ASC;
</cfquery>


<cfloop query="getSubMenu" startrow="1" endrow="1000">
<cfif getSubMenu.parent eq getMenu.id >
<cfmenuitem display="#title#" href="http://www.adobe.com/go/flash";
image=      "http://farm1.static.flickr.com/36/91701519_2027843...; />
</cfif>
</cfloop>

   </cfmenuitem>
</cfloop>

</cfmenu>
Comment 21 written by Scott Jibben on 27 August 2009, at 11:44 PM

@Ray,

I have tried a few attempts to get recursion to work with cfmenu/cfmenuitem. One of the main problems is that you can't have a <cfmenuitem> tag unless it is inside of a <cfmenu> or another <cfmenuitem> tag. So, you can't really have a recursive function that creates child cfmenuitem tags as the CF parser will throw this error:

"The tag CFMENUITEM must have parent cfmenu or cfmenuitem tag."

I have tested my code by replacing the cfmenu/cfmenuitem tag output with <cfmenu and <cfmenuitem, so it is simply displayed the tags. I pasted the output into a template and it works perfectly when I run it. I don't want to have to create cfm template files on the fly using code like this.

I also tried to embed the 'level' into the data so that the code steps into the cfmenu tag tree each time the level increases and steps back out the correct number of </cfmenuitm> tags. So, there was no recursion, just calculating when and how many closing tags to use. This does not work either, the CF parser throws an error on the 'extra' closing tags it thinks are there. Again, I replaced the output cfmenu/cfmenuitem tags with html escaped values and when I pasted the output into a template file and ran it, it worked pefectly.

@Jody,

Nice example for a two level menu. How would you make it work for variable levels? For example one menu may have 3 descendants and another may have 9. I've tried this and once you get into your 4th internal loop, it is pretty messy and once you set your limit, someone will always ask for just one more level.

So far I'm inclined to agree with @Alex Hubner. Recursion doesn't work with cfmenu/cfmenuitem.

[Add Comment] [Subscribe to Comments]

coldfusionJedi

coldfusion, flex, ajax, and stuff

ColdFusion 8: AJAX UI Menus

TweetBacks

Comments

Sponsors

Subscribe

Categories

Who am I?

Recent Posts

Recent Comments

BlogCFC