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
Very nice feature. Too bad it's nearly too ugly in Opera to use :(
@ScottP - not sure. File an ER? :)@Thomas - Ditto - file an ER. Adobe _does_ listen to bug reports.
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.
Will do - think there is a already some of those on file but I'll dbl-check.
Can these new menus in CF8 be built dynamically, for example, with data pulled from a query?
I had no problem making dynamic menuitems.
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
I didn't see that - but as always - file a bug. :)
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.
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.
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>
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
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. :)
Thanks Ray. It works fine. Appreciate your help.
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.
Nevermind...I found the stylesheet
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?
You would need to use recursion. Write a function that gets the top level items, then the children, and so on, and so on.
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?