Search Flex Samples

Nifty Flex Accordion Menu (like on Apple.com)

This is an example of using a slightly modified Flex Accordion to create a sweet looking menu. Someone on flexcoders asked how to make a menu like the one found here on Apple’s website.

Here’s the example I came up with to do this:

The Accordion
This is a Flex Accordion component (well, sort of…). It’s actually a slightly modified Accordion. The cool part is that FlexLib already had a modified Accordion component because I had made the Horizontal Accordion. Because of that there has been a VAccordion in FlexLib as well, which up until now has been exactly the same as the normal Accordion component in the framework.

So I added a new property to both VAccordion and HAccordion called headerLocation, which allows you to specify where the header should appear relative to the content. For VAccordion this property can be either “above” or “below”. Using above means it works just like the normal Accordion. But now you can also specify below, which will render the header below the content, which was the first requirement for this example.

The header renderer
The next problem was that the header of the Accordion needs to be more complex than a normal button. It needs to show two text fields, one for the title of the header and one for the descriptive text. And the description needs to wrap on multiple lines. So as I blogged about previously, I used the CanvasButtonAccordionHeader in FlexLib to easily use a complex header on an Accordion.

The header skin
Next we have the problem of the skin for the button. The skin isn’t too complex, but there are a few things that are hard to do with the standard Button skin. We want rounded corners on the bottom of the button but not the top. And we want nice control over the gradient of the button. What to do? FlexLib has an EnhancedButtonSkin that lets us do all this (and a lot more). Problem solved.

The mouse interaction
The menu we’re trying to emulate responds to mouse over events, not clicks like the normal Accordion does. This is easy enough to fix by simply faking a MouseEvent.CLICK event any time we get a MouseEvent.MOUSE_OVER event. By making our headers dispatch these fake click events we trick the Accordion into opening the child when the mouse rolls over each header.

And there you have it.

View the example in its own window (view-source enabled)
View the source of the example

In the source I’ve bundled a version of flexlib.swc that includes the new headerLocation property for the Accordion components. This is because I haven’t yet released an updated distribution zip on the FlexLib project page that includes this update (but I did commit the changes to SVN if you’re using that).

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples