It's been a while since I wrote and published a tutorial, so I wanted to pick a topic that I think most of us lack... user interface skills :)

ColdFusion has some pretty nifty and useful tags that will do the work for you.. in this particual tutorial we are going to talk about CFMENU.

In ColdFusion 8, a new tag was introduced called CFMENU. Not a lot of people have used (or even heard) of this tag, but let me tell you... it's an awesome user interface resource.

For this tutorial I am going to be working with a HORIZONTAL menu, however you can do VERTICAL, etc. Let's get started.....

First things first.... let's see some code:

<cflayout type="hbox" name="top_navigation">
    <cfmenu bgcolor="##3399FF" menustyle="padding:5;" font="Arial, Helvetica, sans-serif" fontcolor="##FFFFFF" fontsize="16" selectedfontcolor="##FFFFFF" selecteditemcolor="transparent" type="horizontal" >
        <cfmenuitem display="Home Page" />
        <cfif val(session.userID) GT 0>
            <cfmenuitem display="Projects">
                <cfmenuitem display="Search Projects" />
                <cfmenuitem display="Add Project" />
                <cfmenuitem divider="true" />
                <cfmenuitem display="Work Orders" />
            </cfmenuitem>
            <cfmenuitem display="Time Management" />
            <cfmenuitem display="Invoicing" />
            <cfmenuitem display="Reports" />
            <cfmenuitem display="My Account">
            <cfmenuitem display="Maintain My Profile" href="/admin/users/edit.cfm?userID=#val(session.userID)#" />
            <cfmenuitem display="My Calendar" href="/calendars/" />
            <cfmenuitem display="My Documents#" href="/documents/personal/" />
        </cfmenuitem>
        <cfmenuitem display="Logout" href="/logout/" />
    <cfelse>
        <cfmenuitem display="Login" href="/login/" />
    </cfif>
    </cfmenu>
</cflayout>

Now I know that is a lot of code, but let's break it down and see how simple it is to get this going on your own site...

CFLAYOUT = This is a tag that will define the area that the menu will need to show up on.
CFMENU = This is the tag that tells ColdFusion you are trying to create an interactive menu.
CFMENUITEM = This is a menu item within the menu, there can be nested as you can see in the sample above (red area)

Now I know first glance it's like huh? what? what's with the CFIFs? and all that other stuff in the menustyle, etc...

The menu sample I am doing above is doing a few things... first it's two different menus.. one for people logged in, one for people that are NOT logged into the site. You could just as easily have a menu as follows:

<cflayout type="hbox" name="top_navigation">
    <cfmenu bgcolor="##3399FF" menustyle="padding:5;" font="Arial, Helvetica, sans-serif" fontcolor="##FFFFFF" fontsize="16" selectedfontcolor="##FFFFFF" selecteditemcolor="transparent" type="horizontal">
        <cfmenuitem display="Home Page" />
        <cfmenuitem display="Services">
            <cfmenuitem display="Web Development" href="/services/web_development.cfm" />
            <cfmenuitem display="Graphic Design" href="/services/graphic_design.cfm" />
            <cfmenuitem divider="true" />
            <cfmenuitem display="Database Work" href="/services/database_work.cfm" />
        </cfmenuitem>
        <cfmenuitem display="Portfolio">
            <cfmenuitem display="Hotel">
                <cfmenuitem display="Hotel Rhowanda" href="/portfolio/hoispitality/one.cfm" />
                <cfmenuitem display="Wynn Resorts" href="/portfolio/hoispitality/two.cfm" />
            </cfmenuitem>
            <cfmenuitem display="Law">
                <cfmenuitem display="TX Lawyers" href="/portfolio/law/one.cfm" />
                <cfmenuitem display="PA Lawyers" href="/portfolio/law/two.cfm" />
            </cfmenuitem>
        </cfmenuitem>
        <cfmenuitem display="All Others" href="/portfolio/all.cfm" />
    </cfmenu>
</cflayout>

This is a (3) layer menu... you can go as many layers as you want in....

so with a few lines of code, you've got yourself some really nifty interactive menu... Check it out:

There you go, easy coding to menu some really poweful menus.... questions? hit the forums....