I don't normally do "Guest Posts", but Daniel and I were talking about some hacking with CFMENU and CSS. He came up with some interesting findings and as he doesn't have a blog (hey Daniel, I know a good one!) I offered to post his findings here. Everything that follows is his work.

I started on a project a couple days ago that is intended purely for ColdFusion 8, since I wanted to incorporate cfmenu into it. Along the way with my tinkering of cfmenu, I wanted to know how to separate out the style information into a css file rather than using the 'style, menuStyle and childStyle' attributes of cfmenu and cfmenuitem.

I investigated the source of my page and learned that the scripts and css linking necessary to the cfmenu tags are automatically injected into the tag of my page by ColdFusion. I eventually figured out that I could override the style statements in the css pages if I used an ID selector with the name of my menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #myMenu { background-color: #FFCCFF; } </style> </head>

<body> <cfmenu name="myMenu" type="horizontal"> <cfmenuitem name="acrobatInfo" href="http://www.adobe.com/acrobat" display="AcrobatI" /> </cfmenu> </body> </html>

This could also be done from a linked css document, which is ultimately what I was looking to accomplish.

My next goal was to remove the little arrows that indicated when there was a sub-menu. I have done many menus in the past and many of them I never used a sub-menu indicator (you will see why I call it a sub-menu indicator in a moment). Since I knew cfmenu used the Yahoo UI library to create the end result of the menu, I started searching through the YUI documentation for a solution.

The YUI Menu Documentation describes 6 particular classes, that once you understand what they are, it makes setting up style rules for them much easier.

  • menu: a single vertical menu set
  • menuitem: a single list item in a Menu
  • menubar: a single horizontal menu set
  • menubaritem: a single list item in a MenuBar
  • hassubmenu: a menuitem or menubaritem that has a correspond submenu
  • first-of-type: first of a menu, menuitem, menubar or menubaritem in a set

I wound up finding in the YUI Menu Documentation the answer I was looking for. A class named submenuindicator would allow me to control the arrows, but for some odd reason it refused to work. I found a note stating that this would not work for older versions of the YUI and this did apply to me. You can see what I found out about this in the ColdFusion 8 Forums, but suffice it to say I fixed the problem I was having. I used the YUI Menu Documentation to come up with this example, which shows how to remove the sub-menu indicator from the top level horizontal menu, but leave it in the lower vertical menus. I affect the 'visibility' property instead of the 'display', because I noticed in FireFox that my menu would break.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; }

/* Hide the Horizontal Bar sub-menu indicator, but not any of the Vertical */ #myMenu li.hassubmenu.yuimenubaritem em.submenuindicator { visibility: hidden; width: 0px; height: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }

#myMenu li.hassubmenu.yuimenubaritem li.hassubmenu.yuimenuitem em.submenuindicator { visibility: inherit; width: 8px; height: 8px; margin: 0px -16px 0px 10px; }

/* Change Horizontal Bar delimiter - shows use of 'first-of-type' */ #myMenu li.yuimenubaritem { border-color: #FF0000; }

#myMenu li.yuimenubaritem.first-of-type { border: none; } </style> </head>

<body>

<cfmenu name="myMenu" type="horizontal">

<cfmenuitem name="acrobatInfo" href="http://www.adobe.com/acrobat" display="AcrobatI" />

<!--- the ColdFusion menu item has a pull-down submenu. ---> <cfmenuitem name="cfInfo" href="http://www.adobe.com/products/coldfusion" display="ColdFusion">

<cfmenuitem name="cfbuy" href="http://www.adobe.com/products/coldfusion/buy/" display="Buy" />

<cfmenuitem name="cfdocumentation" href="http://www.adobe.com/support/documentation/en/coldfusion/" display="Documentation">

<cfmenuitem name="cfmanuals" href="http://www.adobe.com/support/documentation/en/coldfusion/index.html##manuals" display="Product Manuals" />

<cfmenuitem name="cfrelnotes" href="http://www.adobe.com/support/documentation/en/coldfusion/releasenotes.html" display="Release Notes" />

</cfmenuitem>

<cfmenuitem name="cfsupport" href="http://www.adobe.com/support/coldfusion/" display="Support" />

</cfmenuitem>

<cfmenuitem name="flexInfo" href="http://www.adobe.com/flex" display="Flex" > <cfmenuitem name="fldocumentation" href="http://www.adobe.com/support/documentation/en/flex/" display="Documentation" /> </cfmenuitem> </cfmenu>

</body> </html>

I do not pretend to be the best at writing css statements and this is just an example, but there might be some better statements to accomplish what I have done. I hope this is helpful to those of you that plan on using cfmenu.