Vertical Menu

This is a basic one level vertical flyout menu.

The whole menu is built with CSS - apart from the little arrow that serves as a link background there's no other images involved. The menu buttons themselves are plain text links with some CSS applied to make them more attractive.

Behaviors Used

To build this I used Easy Menu and Swap Link Class. Both of these behaviors are applied once to the menu buttons. Other than that there's just a bit of CSS to add a background image and margins to the body tag. If you do a similar menu to this don't leave out the IE conditional comment as this is needed to make the whole width of the menu button into a clickable link.

To Build This Menu

This menu took a couple of minutes to build - the steps are as follows

1. Add a layer to hold the 5 menu buttons
2. Add some CSS to style the links
3. Create layers for each of the sub menus
4. Add some CSS to style the sub menus
5. Add a closer layer containing a transparent gif
6. Apply the Swap Link Class and Open Menu behaviors to the menu buttons
7. Apply the Close Menu and Remove Link Class behaviors to the close layer

Open the menu in FP to see how everything works. If you want the graphics I've used (page background and arrow) grab them.