How can I create menu like this in Flex 3

Question

How can I create a menu like this in flex 3.

Answer 1

This is how I would probably do it but keep in mind there are other ways to accomplish this.

Create a custom MXML component that contains :

• A TabBar (for the top bar)
• A Container for the sub menu

The component is data-driven. Here is an example of a xml you could pass to the component (based on the picture) :

<TopItem label="home" />
<TopItem label="envelopes" />
<TopItem label="paper">
    <SubItem label="paper and more">
        <Leaf label="8 1/2 x 11 Paper"/>
        <Leaf label="Notecards"/>
    </SubItem>
...

The submenu is added to the stage via the PopupManager so it's always on top of the application.

Tricky parts will be:

• Skinning
• Positionning the Container
• Handling showing/hiding of the Container