Sunday, December 9, 2007

Dreamweaver CS3 - No More Popup Menu Blues!

I was most frustrated when I started to use Dreamweaver CS3 and found they had taken away the use of popup menus. Actually, Adobe will still allow you to edit previously created popup menus but will not allow you to use the popup menu server behavior for creation of new popup menus.

Instead, Abobe insists that you use their new Spry Framework (the Spry Framework an implementation of Adobe's AJAX library). The problem with Spry, however, is that as per Adobe, it has only been tested on more modern, standards-compliant browsers. What this details means in English is that anyone who is using an older browser will not be able to view your spry-based content. According to Adobe's Spry website, the browser's that are supported are:

  • Firefox
  • IE 6 and higher
  • Safari 2
  • Opera 9
The article goes on to say, "We feel this group covers a solid majority of browsers used today. Other browsers or earlier versions of listed browsers may or may not work properly."


I disagree about the "covers a solid majority of browsers" part of this statement. Not all of my web design clients have a "modern" browser and not all of them are interested in upgrading.
Why Adobe would limit your use of the good ol' Javascript-based popup menus is a mystery to me.

I thus searched for a solution and here's what I found:
1. Fireworks CS3 still supports popup menus. Although it was just easier to do all of your work in DW, you can create the popup menu in FWCS3 and then use the Import>Fireworks HTML command in DWCS3 to bring in the menu. The drawback is that the menu needs to be edited in FWCS3 and cannot be edited in DWCS3. It's a pain but it works.

2. Use an older version of DW to create the popup menu. I don't know what the license agreement is on this one so you'd have to check, but if you have an older version of the software (which you should if you upgraded because you are supposed to keep and retire the older versions once you've upgraded) , you could create the popup menu in an older version of DW first and then bring in the site to DWCS3.

*** For some reason DW will NOT allow you to add popup menus to a .dwt (template) file. Consider creating your .htm or .html file with the menus ahead of time and then convert the file to a template. Another way is to create an .htm or .html file from your existing template and then add the popup menus and resave the file as a template. Cascading the update to pre-existing template files is difficult, so plan ahead. ***

3. Learn Javascript. Building a drop-down menu in Javascript isn't that difficult, but as you add deeper layers of navigation the coding does get a little more challenging.

So while I can't explain why Dreamweaver CS3 doesn't want you to have maximum compatibility across browsers (even old ones), I hope this article helps you to do so anyway!

12 comments:

Unknown said...

Thanks, this clarifies a lot of confusion I was having regarding this issue.

Anonymous said...

Hi there, Thanks for that it was useful to finally find why 'show pop up menu' is grayed out when I tried to attach the show pop up menu behavior into a template. A problem which is not mentioned in any of the documentation that comes with dreamweaver8.

Intuitively I found the way and have been creating it first in an html page saved in the same directory and then cut and copy it to the template.

In this option once a link is pasted into the template, one can modify the show pop menu within the template. However I found that using this method does not import the the behavior or pop up menu items, which meant I had to do it all over again.

So in summary the method suggested in this blog so far worked better.

However there is another problem I encountered using both methods. When I tested what I have done, (both on my computer and on line) the links in the pop up menu return an error message despite a correct url to the html pages. It is as if relative to document links create a problem, or having the template and destinations files not in the same folder, I am not sure yet.

It is staggering that one can not implement pop up menu from template kind of bits the purpose... and I really want to avoid frames to overcome this problem.

Useing the method suggested in the blog may work but is never going to be a smooth option for future updating...

Next I am going to try importing an html containing only the pop up menu into a layer, that might work...

I will be interested to know if you have any idea on how to resolve the links issue.

best wishes
law paradox

David A. Wank said...

I'm glad the post is helpful and thanks for the feedback. To try answer your questions, I generally have not had url or path problems using either method. I've been using dreamweaver for years and I've always kept my template files in a separate folder from any content (mainly because it helps with organization and because I don't want the templates uploaded to the remote server). Also, I've used DW menus in the past for links for pages in the site (e.g home, about, products, etc), as well as for links within a page (HTML anchors) so maybe it's a syntax problem.

Further, as best I can recall dreamweaver unfortunately has never allowed you to add a popup menu behavior to an existing .dwt (template) file. If you are using Dreamweaver MX, for example, you'd create the page as an .htm/.html page, apply the pop-up behavior, and then save the file as a template. It's annoying but I guess that's dreamweaver really wanting you to plan ahead for your design!

Anonymous said...

Hi Again
progressing with it further I found why I had the problem.

It seems to relate to 'links relative to document' vs 'relative to root directory'.

When linking to all other pages from within the template folder, relative to document links looks like that ../filname.html. When those links appear on pages which are in the directory above templates, the
../ is looking for a directory above the root directory and returning un-found file message.

I resolved this by shifting to relative to root mode, which is not idle and make previewing a bit of a nightmare... But when online and live it works.

many thanks once again. lets hope all of this is helpful to other.

Best wishes
Ofer

Anonymous said...

Hi there, thanks for your info on this dreamweaver matter. I am so frustrated with this as it seems that Dreamweaver should make this an easy task. I created my file in Fireworks and am having a different problem. When I update the pages attached to my template that I have imported my Fireworks file into, they don't show my flyout menu/don't update. If I create a new file from my template it is there and works. Any thoughts?

David A. Wank said...

Hey Anonymous,
I don't want to get into specifics of individual troubleshooting on this post, but if you want to email me I'd be happy to talk to you about it.
You can drop me a line at davidw[NOSPAMAT]shorthillsdesign.com.

Once we have a solution we could then post it to the correct place.

Anonymous said...

Hi David,

Thanks for this interesting column.

I have also been affected by this rather strange point that Adobe have removed the 'Show Pop-Up Menu' option.

While I have found a work around by including a small part of the old 'popup' code from previous popup menus, the now deprecated 'Show Pop-up Menu' option in CS3 is highlighted and I can create new pop-up menus'.

While this does work, I can't help but think that in the next version of DW, Adobe will just drop the option all together. The writing is on the wall.

So with this in mind I have spent many hours trying to master Spry menus, but have found no joy. I am familiar with CSS and this is obviously where most of the appearance settings lie. After spending a few hours adjusting and tweaking to achieve a menu which compliments the website design, the chance of the Spry menu actually working in all browsers is slight.
With the 'Show Popup Menu' facility this would only have taken 5 minutes at the most, and it would work on all browsers.

I have since tried flash menus but this too has issues, such as HTML hyperlinks links not being recognized when they are under transparent flash object.
I really don't know what the best solution is, but all I am wanting is a simple popup menu facility built into DW, exactly like 'Show Pop-up Menu'!
Thanks again

Anonymous said...

Thanks for the helpful post. I am SO frustrated with Adobe for this one. It seems they really dropped the ball. Aren't routine tasks supposed to get easier as software versions update?!

Anonymous said...

my gosh ive been spending FOREVER trying to figure out what in the world was wrong, well i found out now. thanks a ton man

Anonymous said...

This "Show Pop U Menu' Thing not being a part of Dreamweaver CS3 anymore is really the most outrageous blunder that has ever happened with Dreamweaver. Hope fully they will pull there head out because Spry sucks and constantly freezes when i try to a a Menu bar and edit the sub menus. I continue to get this Java Script error "While executing inspectSelection in spry_menubar.htm, a javascript error occured" I don't know what to do this has added hours on to a what used to be a simple task. if you have any ways to fix thiis java erro let me know @ tschafer@earthlink.net. peace out

Anonymous said...

Thanks for doing the legwork on this. I was starting to research this and came across your article.

Aadenekan said...

Hi David, I was devastated as you when I began to use recent versions of DREAMWEAVER. I felt that they care less about users of their software because that major change has affected me seriously.
I hope they realise this and watch how they change stuffs in future.