• Professional look, XP-like dropdown. Space saving. Intuitive pull-down navigation.
• Easy to use, build unlimited pull-down menu using nested tags.
• Menu can be called from any objects. Image, text, or even context menu-using mouse right-click.
• Cross browser compatible

• ColdFusion 5
• ColdFusion MX
• ColdFusion 7
• ColdFusion 8

on all platforms

Supported browsers:

• Microsoft Internet Explorer 5+
• Mozilla Firefox 1+

There are 3 custom tags needs to be in place to generate unlimited pull down menu.
Let's go through one by one:

1. cf_xpmenu_set

This is the container for all pulldown menu.
You have to use this tag in order to 'group' all pulldown menu for each set of menu.
That means you can have more than one set of pulldown menu in one page!
<cf_xpmenu_set name="the name of menu set [mandatory]"
        textcolor="color for text in the whole set of menu"
        bgcolor="background color"
        overbgcolor="background color when a menu is in 'mouseover' condition"
        overtextcolor="text color when a menu is in 'mouseover' condition"
        leftbgcolor="background color for the left part of menu (icon place)"
        bordercolor="menu border color"       
        submenuimage="image for menu that has child menu, usually arrow icon. Fully qualified image URL"
        blankimage="blank image. Fully qualified image URL">       
</cf_xpmenu_set>       

Please check /images folder, i have created  sample for both submenuimage (xpmenu_arrow.gif) and blankimage (xpmenu_blank.gif)
These two images is required mostly when the user is using Mozilla Firefox.       

2. cf_xpmenu_menu

This is custom tag to create a menu.
<cf_xpmenu_menu name="the name of menu [mandatory]>   
</cf_xpmenu_menu>  

3. cf_xpmenu_element

This is custom tag to add each element/item of a menu
<cf_xpmenu_element name="name of element [mandatory]"
     icon="fully qualified URL for image/icon"
     text="caption of menu element"
     href="URL/action to take whenever an element is clicked"
     target="window target name for href">
</cf_xpmenu_element>         

Please check the source code in docs & examples to see how this custom tag works

Activate or deactive menu using javascript
This custom tag provides javascript functions to show, hide, activate and deactive menu element.
Below are list of Javascript functions provided by this custom tag:

1. XPMenu_ShowMenuAtObj(MenuID,obj,halign,valign,hmargin,vmargin);

To show menu...
- MenuID -> Menu Name you want to show (cf_xpmenu_menu name="name")
- obj -> object that is being attached to this function. Most of the time you will set this variable with "this"
- halign -> horizontal alignment [left/right]
- valign -> vertical alignment [top/bottom]
- hmargin -> horizontal margin
- vmargin -> vertical margin

Use this function to show menu upon action from user, for example:
- onmouseover -> <a href="#" onmouseover="XPMenu_ShowMenuAtObj('Products',this,'right','top',80,5);">your text</a>
- onmouseclick -> <a href="#" onclick="XPMenu_ShowMenuAtObj('Products',this,'right','top',80,5);">your text</a>
- oncontextmenu -> <a href="#" oncontextmenu="XPMenu_ShowMenuAtObj('Products',this,'right','top',80,5);">your text</a>

2. XPMenu_HideMenu(MenuID);

To hide menu...
- MenuID -> menu name you want to hide

3. XPMenu_Enable(MenuElementName);

To enable a menu item
- MenuElementName -> the name(id) of an element you want to enable (xp_menu_element name="")

4. XPMenu_Disable(MenuElementName);

To disable a menu item
- MenuElementName -> the name(id) of an element you want to disable (xp_menu_element name="")

You will need this tag on almost anykind of website or web application.
This tag will help you create unlimited level of pulldown menu easily, without too much hassle of JavaScript code.

Some applications that may benefit by using this tag are:

• Any kind of website
• Backend web application
• Infact, since this custom tags creates pull-down menu, it can be use in amost anykind of website.
  Pulldown menu is one of the most widely use navigation system founds in GUI based application.

For a complete example please click this link
(Open in new window)