cfmenu

Description

Creates a horizontal or vertical menu. Any menu item can be the top level of a submenu.

Category

Display management tags

Syntax

<cfmenu 
    bgcolor="HTML color value" 
    childStyle="CSS style specification" 
    font="HTML font family" 
    fontColor="HTML color value" 
    fontSize="Number of pixels" 
    menuStyle="CSS style specification" 
    name="string" 
    selectedFontColor="HTML color value" 
    selectedItemColor="HTML color value" 
    type="horizontal|vertical 
    width="Number of pixels"> 
 
        cfmenuitem tags 
 
</cfmenu>

The cfmenu tag must have a body that contains at least one cfmenuitem tag to define the menu items and an end </cfmenu> tag.

Note: You can specify this tag’s attribute in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag’s attribute name as structure key.

See also

cfajaximport, cfmenuitem, Using menus and toolbars in Using Ajax User Interface Components and Features in the Developing ColdFusion Applications

History

ColdFusion 8: Added this tag.

Attributes

Attribute

Req/Opt

Default

Description

bgColor

Optional

Background color style of the menu

The color of the menu background. You can use any valid HTML color specification.

This specification has the following behaviors:

  • You can override it locally by specifying the menuStyle attribute of this tag and any cfmenuitem tag.

  • It controls the background of color surrounding a submenu whose background is specified by a childStyle attribute.

childStyle

Optional

 

A CSS style specification that applies to the following menu items:

  • The items of the top-level menu

  • All child menu items, including the children of submenus

This attribute lets you use a single style specification for all menu items.

font

Optional

Browser default font

The font to use for all child menu items. Use any valid HTML font-family style attribute. Some common values are serif, sans-serif, Times, Courier, and Arial.

fontColor

Optional

black

The color of the menu text. Use any valid HTML color specification.

fontSize

Optional

Font size of the menu item

The size of the font. Use a numeric value, such as 8, to specify a pixel character size. Use a percentage value, such as 80%, to specify a size relative to the default font size.

Font sizes larger than 20 pixels can result in submenu text exceeding the menu boundary.

menuStyle

Optional

 

A CSS style specification that applies to the menu, including any parts of the menu that do not have items.

If you do not specify style information in the cfmenuitem tags, this attribute controls the style of the top-level items.

name

Optional

 

The name of the menu.

selectedFontColor

Optional

black

The color of the text for the menu item that has the focus. Use any valid HTML color specification.

selectedItemColor

Optional

light blue

The color that highlights the menu item that has the focus. You can use any valid HTML color specification.

type

Optional

horizontal

The orientation of the menu. The following values are valid:

  • horizontal: Menu items are arranged horizontally.

  • vertical: Menu items are arranged vertically.

Submenus of both menu types are always arranged vertically.

width

Optional

Width of the container

The width of a vertical menu; not valid for horizontal menus.

Use a numeric value, such as 50, to specify a pixel size. Use a percentage value, such as 30%, to specify a size relative to the parent element’s size.

Usage

The cfmenu tag defines a horizontal or vertical ColdFusion menu. You use a single cfmenu tag to define the general menu characteristics, and you use cfmenuitem child tags to define the individual menu entries and any submenus. You create submenus by putting cfmenuitem tags in the body of a cfmenuitem tag.

You cannot nest a cfmenu tag inside a form or inside a cfmenu tag or cfmenuitem tag.

Example

The following example creates a simple menu bar. When you click an entry in the bar, the browser displays the Adobe website page for the selected product. You can expand the ColdFusion item by clicking the icon, and then select an item to display a specific ColdFusion web page.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
<cfmenu name="menu" type="horizontal" fontsize="14" bgcolor="##CCFFFF"> 
    <cfmenuitem name="acrobat" href="http://www.adobe.com/acrobat" display="Acrobat"/> 
    <cfmenuitem name="aftereffects" href="http://www.adobe.com/aftereffects"  
        display="After Effects"/> 
    <!--- The ColdFusion menu item has a pop-up menu. ---> 
    <cfmenuitem name="coldfusion" 
            href="http://www.adobe.com/products/coldfusion" display="ColdFusion"> 
        <cfmenuitem name="buy" 
            href="http://www.adobe.com/products/coldfusion/buy/" display="Buy"/> 
        <cfmenuitem name="devcenter" 
            href="http://www.adobe.com/devnet/coldfusion/" display="Developer Center"/> 
        <cfmenuitem name="documentation" 
            href="http://www.adobe.com/support/documentation/en/coldfusion/" 
                display="Documentation"/> 
        <cfmenuitem name="support" href="http://www.adobe.com/support/coldfusion/"  
            display="Support"/> 
    </cfmenuitem> 
    <cfmenuitem name="flex" href="http://www.adobe.com/flex" display="Flex"/> 
</cfmenu> 
</body> 
</html>