Intern Project: DHTML Menu System Shenoa Lawrence

May 1, 2001

Frequently at work, we use Macromedia's Flash to create an interactive menu navigation system on webpages. These systems are very attractive to our customers, but need to be included in the design layout from the beginning so the designer can work it into the site in a seamless manner. In this instance, the client decided he wanted a Flash styled navigation system included in his website after we had finished the design. Unfortunately, the design would not easily allow for inclusion of a Flash navigation system without some major modifications. My project was to find an alternative (possibly using DHTML) so we would not have to completely redesign his site. The Flash menu system the doctor liked was to be found at:

http://www.pbhs.com/website/portfolio/oms/sea_ranch/

I needed to find a way to create a menu that drops down below when the user rolls their mouse over a navigation image. My first avenue of investigation was DHTML. Using online resources, I scoured the web for existing code that I could modify to suit our purposes. Much of what I found was either copyrighted or not sophisticated enough to handle all aspects of our navigation system. Most of my time spent on this project was research time, and a lot of what I found was not usable for one reason or another. There were many options for inclusion of a text menu, but I needed a system that could use graphics in order to properly blend with the rest of the site.

In the end, my DHTML search for modifiable code came down to one option; a system combining DHTML and JavaScript. Unfortunately, I am not capable enough with JavaScript in order to carry out the modifications we would need to do in order to make the system work. I noted the resource to my supervisor in case the company decided to implement it in the future. It seemed that I was at a dead end.

I needed to broaden my search to include other options besides existing code that we could modify. My research led me to an option with another Macromedia product, called Fireworks. Fireworks has a menu making function that seemed to encompass everything we needed to make this navigation system work. My first order of business was to download a trial version of Fireworks. They offer 30 day trial versions, which worked out perfect for my purposes. I have never used the program before, so there was a bit of a learning curve before I could produce anything workable. But, I'm sure the time I spent learning Fireworks was much less than I would have spent trying to muddle through JavaScript. Fireworks used DHTML to create the system in a semi-WYSIWYG manner. It has a wizard built-in that allows you to put in variables such as text, font, color, and size. Once I got the hang of this wizard, the creation of the menu system was fairly straight forward. The finished version of the menu can be seen at:

http://www.pbhs.com/perio/baradaran/

In my opinion, DHTML is a nice idea, but needs much more work. The concept of using "layers" (one of the nicer features of DHTML) would be very handy if they were reliable. But, it is not universal in a cross-browser, cross-platform manner, that is why JavaScript is so essential. JavaScript can help a developer compensate for the variations encountered by viewing a page on different platforms. Even the code created by Fireworks would not make the menu appear exactly the same on different platforms. I was just lucky enough that it was similar enough to use. All in all, it was a good learning experience. I have decided not to use DHTML, but to definitely learn more about Fireworks so I can understand what else it offers to web development.