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:
<cfmenu bgColor="##c0c0c0">
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.)
<cfmenuitem display="Item One" href="http://www.adobe.com" />
<cfmenuitem display="Item Two" href="http://www.cnn.com" />
</cfmenu>
How do you create sub menus? Just nest the menu items!
<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>
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:
<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:
<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:
<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.
Comments
@Thomas - Ditto - file an ER. Adobe _does_ listen to bug reports.
<div id="_cf_menu1182244792322"
because all ids have to start with a letter.
--Dave
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.
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>
Thanks.
Bill
I just checked - cfmenuitem includes a target attribute.
So there ya go. :)
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.
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?

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?