CFMenu Primer
One of the great new tags in ColdFusion 8 is the CFMenu tag. This tag allows you to create a menu or toolbar that can run horizontal or vertical and can be styled to your liking. To create a menu you need 2 tags, cfmenu & cfmenuItem. The top level cfmenu tag defines the characteristics of the menu while the cfmenuitem tag will define each of your menus. I am not sure how many nested menus you can create but I have already created a 3 level navigation menu. Lets get started on create the menu. The first thing you need to do is create the menu and set up some basic settings of your menu. Alone the code below will not run because you need at least 1 menu item but the code is syntactically correct. To learn more about all of the attributes please refer to the cfml reference guide.
</cfmenu>
Now that we have our menu setup we need to start adding menu items. The cfmenuitem tag defines an entry in a menu, including an item that is the head of a submenu. You can nest this tag to create multiple levels of menus. One important note to that though from the cfml refernce guide
If the cfmenuitem tag does not have a body with an end tag, you must close the tag with a forward slash character before the closing greater than character (/>), for example,At the very least you need to provide a display attribute, this is the text to display on the menu. You can also display an href attribute as a link location or javascript function name.<cfmenuitem divider="true" />
<cfmenuitem name="products" display="Products" href="##"/>
<cfmenuitem name="services" display="Services" href="##"/>
<cfmenuitem name="support" display="Support" href="##"/>
<cfmenuitem name="Company" display="Company" href="##">
Finally we can put the menu all together. One thing new in ColdFusion 8 is the ability to provide the attribute Collection argument to a tag. I have spoke about this before so run through my archives if you are not sure what this is. I like the syntax better so my final example will create a structure, define the menu properties as that structure and pass it to the menu as an attribute collection. You will also notice that I have nested menus to show you an example of creating sub menus.
<cfset menu.name = "myMenu">
<cfset menu.bgColor = "##CDEB8B">
<cfset menu.font = "Times">
<cfset menu.fontColor = "##73880A">
<cfset menu.fontSize= 12>
<cfset menu.selectedFontColor = "##356AA0">
<cfset menu.selectedItemColor = "##C3D9FF">
<cfset menu.type = "horizontal">
<!--- you can not specify a width if the menu type is horizontal --->
<cfif menu.type EQ "vertical">
<cfset menu.width = "100">
</cfif>
<cfmenu attributeCollection="#menu#">
<cfmenuitem name="home" display="Home" href="##"/>
<cfmenuitem name="products" display="Products" href="##"/>
<cfmenuitem name="services" display="Services" href="##"/>
<cfmenuitem name="support" display="Support" href="##"/>
<cfmenuitem name="Company" display="Company" href="##">
<cfmenuitem name="about" display="About Us"/>
<cfmenuitem name="news" display="News"/>
<cfmenuitem name="jobs" display="Jobs"/>
<cfmenuitem name="articles" display="Articles">
<cfmenuitem name="current" display="Current Articles"/>
<cfmenuitem name="archive" display="Articles"/>
</cfmenuitem>
</cfmenuitem>
<cfmenuitem name="store" display="Store">
<cfmenuitem name="shopnow" display="Shop Now"/>
<cfmenuitem name="account" display="Your Account"/>
</cfmenuitem>
</cfmenu>
If you have any questions feel free to leave a comment. If you would like to see this menu in action just click the link below. Also be on the look out for a couple more menu examples.
http://h127408.cf8beta.com/cfmenu/index.cfm
