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">
<cfmenuitem display="Item One" href="http://www.adobe.com" />
<cfmenuitem display="Item Two" href="http://www.cnn.com" />
</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!
<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.