Images -> No Flash Required! Display Sample in a separate window

Last week I was browsing the internet looking for web sites using menus created with tools other than DHTML Menu Builder.

On a visit to Macromedia's newly redesigned front page I saw that they were using menus. Of course, I wasn't surprised to see that they used Flash to build their menus.

Then I wondered how hard would it be to re-create their menus using DHTML Menu Builder.
Well, here are the results! 99% identical menus created with DHTML Menu Builder without using Flash!

How we did it?

First of all you will notice that there're several elements in this project:

All those three elements are toolbars; even the web site title is a toolbar with a disabled group.

The toolbar items' selection effects
 

Here you can see how the selection effect for the groups is made.
For the normal state we use transparent GIF images so the background of the toolbar is revealed. When the mouse is moved over one of the toolbar items, three images are painted on the toolbar item: two on the sides, to give it the rounded look, and one in the background.

Using this method will give us great flexibility because the background image will automatically stretch to fit a caption of any length.

Notice that the selection effect is a bit different for those toolbar items that do not display a menu, such as "home" and "store". This is done by simply using slightly different background images for the over state of these groups.

The commands' selection effects

Just as with the toolbar items, we used transparent GIF images for the normal state of the commands. Then, to create the soft blue rounded selection effect we used three images. The images on the sides are used to create the rounded effect and the one in the background is used for the background color.
Again, this technique is what allows us the flexibility to use images to create a nice selection effect that automatically adjusts itself to the length of the menu items' caption.

Also notice that the groups on the top/right toolbar use the same selection effects as the commands. This was done by simply applying the same set of background images used in the commands to the toolbar items in that particular toolbar.

  Download This Project