Introduction

One of the interesting new feature in FP2003 is layers and behaviors. They open plenty of possibilities for web developers - one of the most useful is the ability to build drop down menus entirely point and click in design view, without needing any third-party scripts or addins.

So far so good - Jim Buyens has a nice tutorial explaining the technique here. However while this technique is certainly easy it's far from perfect. Let's say you want to build a 5 button menu, you'd need to add 5 behaviors to each in button - 25 in total. Not only will this lead to a lot of code on the page it's pretty time-consuming.

The Solution

My answer is a behavior to do most of the boring work for you. The end result is quicker development and leaner code. All we need to do is add 1 behavior to each button - much quicker :-)

I've also done a behavior to help build CSS driven menus. Personally I'm moving away from image based navigation with JavaScript rollovers in favour of totally CSS driven menus. Hopefully my behavior will make these type of menus a little easier.

You can read about and download both behaviors here, view some examples below or go straight into a quick tutorial .

Examples

Using my technique you can build three different types of menu

Vertical Flyout - The menu is arranged vertically along the left of the page. The example here also uses my CSS behavior.
Example

Horizontal Dropdown - This is probably the most common type of menu. The buttons are arranged horizontally along the top of the page the example also uses the stock FP swap image behavior to add JavaScript image rollover effects.
Example

Horizontal Strip - This is an alternative horizontal menu, the example also uses my CSS behavior to make an imageless menu
Example

Another Behavior

Here's another behavior that will help you build a vertical scroller with FP layers.

Contact

Feel free to contact me with your questions/comments about these behaviors.