Cool Drop Down Boxes with CFMenu

I've been working on a couple of projects these past 2 weeks since I released the latest version of CFShopkart (which is why some of you haven't gotten responses back to your tickets yet, but I'm getting caught up on them so please be patient-- trying to deal with the more urgent ones first).

Anyway, before I called it quits for tonight I wanted to share something with my fellow CF developers because it's just too good NOT to.

I am working on a web site and in the graphics submitted to me they had a form with a styled drop down box. As any web programmer knows, drop down boxes can't be styled very easily. Most browsers ignore CSS applied to them and you end up with an ugly gray box anyway.

I was determined to make the drop downs look just how the client wanted so they needed to match the rest of the styles I had already applied to the other form fields. So I set out to find the solution. I thought for sure there would be plenty of scripts around the web that demonstrated just how to do it, because I've seen it done on a few sites using styled UL and LI tags. But alas, I found nothing that worked. Oh, I found a couple of solutions that came close, but they would work in one browser and not in another. Sure, I could use a flash form in CF--it's easy to do-- but I just wanted it to be styled HTML; I wasn't about to redo the entire form.

...and I found nothing that worked. Needless to say, I was frustrated.

I gave up for awhile, because I needed to run a few errands, and while I was out it dawned on me...and this is why I like Coldfusion 8 so much: CFMENU to the rescue!

BUT wait, would I be able to make a CFMENU look like a styled drop down box? And could I get it to behave like one? What about passing the form field value to the next page? Sounds complicated, but it's not!

It was easier than I thought! Here is how I did it (link below to example and code):

1. I created a javascript function that would change the value of a standard text input depending on what value I passed to the function.

2. I styled the input box to match that of what the client wanted using CSS. I also changed the styles for the cfmenu to match the site.

3. I created a CFMENU with a sub menu that contained all the data that would appear in the drop down.

4. Finally, I put the input text box I created as the parent of the cfmenu, and for each item on the the sub menu simply called the function I wrote in step one to change the value of the text box depending on what they chose from the list.

Ok, so it doesn't perform EXACTLY like a drop down box, but it's pretty darn close! The client was very pleased with it. The only downside is that you can't put the cfmenu within a cfform tag. I don't know if that is a big deal for you, but if it is, you might be able to view page source and copy the actual HTML and javascript links generated by CF and use that instead of a cfmenu tag.

Maybe they should make something like this for CF9 or enhance CFMENU so it has more options, because there are a few things I would like to do if I had more access to the features within the YUI menu scripts. Reading the website about YUI, I discovered there are a lot of options that just aren't accessible (that I'm aware of) through CFMENU.

You can see a sample and how exactly I did it by clicking here.