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)
<!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)
<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:
<!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 (9) |
12600 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
Thanks for this overview. It works great now. :-)
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!
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.
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.
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.
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.