I am pretty excited about the new CFMenu functionality. It's by far the easiest interface I've used to create a DHTML/JavaScript/CSS menu. Basically there are two tags, <cfmenu> sets up the basic settings for the menu and <cfmenuitem> us used to build the menu items structure.

You can nest as many <cfmenuitem> levels as you want, however, once you get past 5 levels deep, you start to get noticeably slow page loads. Once you get past 10 levels,

you will notice that after the really slow page load, when you navigate the levels, it takes a long time to open each of the menu branches. I went as far as twenty levels deep, and it worked, but it locked my browser for about a minute or so before it loaded, and then it locked again when I tried to navigate the menu. For best results, I would suggest you keep your menu within 5 levels deep.

You can customize the fonts, colors, and highlight effects of the menu using the <cfmenu> tag. One small glitch I noticed is that if you don't use the default selected item background color, then when you navigate the menu in Internet Explorer, it flickers with the default baby blue before it changes to the color you selected. I have reported this browser compatibility issue to Adobe (bug #70452), so hopefully there will be a hot fix for that sometime soon.

In the mean time, on my development server, I was able to get rid of the blue part of the flicker by editing the /CFIDE/scripts/ajax/resources/yui/yui.css file and removing the default background color. Of course, it still flickers a little, but at least there is no more blue in the flicker. The main draw back is that if you do that, there is not a default background color so you will always have to specify a color in the selecteditemcolor attribute, which I would have done anyways because I don't like the default blue so it works out fine for me.

One other thing I noticed is that the cfmenu tag does not play well with <cflayout type="border"> unless you only have one level of menu options.

I tried a vertical menu on the "left" cflayoutarea (click here and expand the menu)

<cfoutput>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <title>CFMenu with CFLayout</title>
</head>
<body>
<cflayout type="border">
   
   <cflayoutarea position="left" name="LeftNav">
      <table cellpadding="5">
      <tr>
         <td align="center">Administration Console</td>
      </tr>
      </table>
      <cfmenu type="VERTICAL"
         menustyle="font-weight: bold;"
         childstyle="font-weight: bold;"
         bgcolor="##000000"
         fontcolor="##ffffff"
         selecteditemcolor="##DDDDDD"
         selectedfontcolor="##000000">

         
         <cfmenuitem display="Page Content">
            <cfmenuitem display="Home"/>
            <cfmenuitem display="About Us"/>
            <cfmenuitem display="Contact Us"/>
         </cfmenuitem>
         <cfmenuitem display="Products"/>
         <cfmenuitem display="Categories"/>
         <cfmenuitem display="Shop Locations"/>
      
      </cfmenu>
   </cflayoutarea>
   
   <cflayoutarea position="center" name="main">
   <br><br>This is where all the content would be displayed if this were not just a sample
    and I actually wanted to go through the trouble to make it work.
   </cflayoutarea>
   
</cflayout>
</body>
</html>
</cfoutput>

And I also tried a horizontal top menu (click here and expand the menu)

<cfoutput><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <title>CFMenu with CFLayout</title>
</head>
<body>
<cflayout type="border">
   
   <cflayoutarea position="top" name="TopNav">
      <table cellpadding="5">
      <tr>
         <td align="center">Administration Console</td>
         <td>
         <cfmenu type="HORIZONTAL"
            menustyle="font-weight: bold;"
            childstyle="font-weight: bold;"
            bgcolor="##000000"
            fontcolor="##ffffff"
            selecteditemcolor="##DDDDDD"
            selectedfontcolor="##000000">

            
            <cfmenuitem display="Page Content">
               <cfmenuitem display="Home"/>
               <cfmenuitem display="About Us"/>
               <cfmenuitem display="Contact Us"/>
            </cfmenuitem>
            <cfmenuitem display="Products"/>
            <cfmenuitem display="Categories"/>
            <cfmenuitem display="Shop Locations"/>
            
         </cfmenu>
         </td>
      </tr>
      </table>
      
   </cflayoutarea>
   
   <cflayoutarea position="center" name="main">
   <br><br>This is where all the content would be displayed if this were not just a sample
    and I actually wanted to go through the trouble to make it work.
   </cflayoutarea>
   
</cflayout>
</body>
</html>
</cfoutput>

either way the cfmenu does not expand outside of the cflayoutarea it is in, so you would have to just use a regular table for the layout and the you could put your dynamic content into a cfdiv like:

<cfoutput>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <title>CFMenu with CFDiv</title>
</head>
<body>
<table height="500">
   <tr>
      <td height="50" align="center">Administration Console</td>
      <td rowspan="2" width="1" bgcolor="808080"></td>
      <td rowspan="2" valign="top">
         <cfdiv id="MainDiv">This is where all the content would be displayed if this were not just a sample
          and I actually wanted to go through the trouble to make it work. I would have my cfmenu items use
          ColdFusion.Navigate() on my menu items to change the content in the div.</cfdiv>
      </td>
   </tr>
   <tr>
      <td height="450" valign="top">
         <cfmenu type="VERTICAL"
            menustyle="font-weight: bold;"
            childstyle="font-weight: bold;"
            bgcolor="##000000"
            fontcolor="##ffffff"
            selecteditemcolor="##DDDDDD"
            selectedfontcolor="##000000">

            
            <cfmenuitem display="Page Content">
               <cfmenuitem display="Home"/>
               <cfmenuitem display="About Us"/>
               <cfmenuitem display="Contact Us"/>
            </cfmenuitem>
            <cfmenuitem display="Products"/>
            <cfmenuitem display="Categories"/>
            <cfmenuitem display="Shop Locations"/>
            
         </cfmenu>
      </td>
   </tr>
</table>
</body>
</html>
</cfoutput>

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Jim's Gravatar I found that if you put the tag in a CFDiv tag the lower level menus do not fly out.
# Posted By Jim | 11/13/07 9:27 AM
Dan Sorensen's Gravatar Have you had any problems with the CF Menu not working in any browsers? On my laptop running Firefox the menu flickers and I see a message that says "Collapsed Click to Expand" (Not your example, my own test of this nifty feature. It works great in IE 6. I wonder what I could be doing wrong...)
# Posted By Dan Sorensen | 11/13/07 5:40 PM
Dan Sorensen's Gravatar Got it working. :-) Needed to replace my CFIDE folder with a current version. (I still had the Scorpio Beta on my laptop. Oops...)

Thanks for this overview. It works great now. :-)
# Posted By Dan Sorensen | 11/13/07 6:47 PM
Scott Bennett's Gravatar Glad you got it working. You definitely need your CFIDE directory working properly as of CF8. In fact, I am going to make an entry about that right now.
# Posted By Scott Bennett | 11/13/07 6:53 PM
gdemaria's Gravatar Hey Scott,
CFMENU when initially launched seems to open with a broken (unformatted) display and then "snaps" together when the page is completely loaded. This is similar to the CFWINDOW problem
where initially hidden pop-up windows have their names display on the page and then disappear after the page is fully loaded.

I'm wondering if you are experiencing this and if you may know of a work-around.
Thanks!
# Posted By gdemaria | 2/6/08 1:41 PM
Scott Bennett's Gravatar @gdemaria,

I have seen that with both cfwindow and cfmenu and I believe it has mostly to do with the order in which the browser is loading the style sheets and javascript, and more specifically, the time it takes between loading the page HTML and loading then applying the style sheets and javascript.

Off the top of my head, the best (untested) workaround I can think of is to create a div layer around your cfwindow/cfmenu tag that is set to display:none then use cfajaxonload to call a javascript function that changes that div layer so that that it is visible. This should hide the contents of your window and menu until after the css and javascript has been applied and the window/menu will all appear at once.
# Posted By Scott Bennett | 2/6/08 3:50 PM
pioslomc's Gravatar Hi Scott,

When I am using AJAX components I have sometime some problem with them.
The same with your example about menu (is not properly showed in browser). when I am checking Validation (in my Dreaweaver8) I have errors like:
"The tag name "cfmenu" not found in currently active versions.
When I am checking TargetBrowserCheck (Dreamweaver8) I have errors like:
"The cfmenu is not supported (names of browsers)".
The same problem I have with cfajaximport, then my browser give me an additional message about unknown runtime error
I wil be preciate if you help me.
# Posted By pioslomc | 9/12/08 5:58 AM
Andrew's Gravatar Is there a way with cfmenu to get the clicked on menu item to stay highlighed so the user can see what page they are on?

Eg I have a cfmenu with a "home" as a menu item, when the user clicks on this menu item it takes you to that link within the current site and I would like the home menu item to be highighted so it's easy for the user to see what page they are on.
# Posted By Andrew | 1/27/09 12:14 AM
Yosu's Gravatar I am testing the cfmenu tag with Cold Fusion 9 on Windows -
I noticed that there are specific things that disable the menu
functionality, such as clicking the Back button on IE. (meaning
that I no longer get the down arrow, and I can't click the link)
Is there something that I have to do, to force the page to reload?
Thank you.
# Posted By Yosu | 11/25/09 6:13 PM
 
Home | Blog | Contact | © 2001 - 2022 The ColdFusion Guy - Scott Bennett. All rights reserved.