In Flex 3, there are two flex components can be used to create dropdown menu. But none of them are easily customized and change styles. Menu is the default component in Flex for us to create menu utility. ComboBox and PopUpButton looks the same. There are only a little different between them. The ComboBox is designed for data selection. When you click the ComboBox, it will show the dropdown list by default. PopUpButton performs as a button with an extra small drop down icon. When you click the drop down icon, it will show you a drop list. Here is the dropdown menu what I want to implement in my project.

The default components which Flex provides can meet the needs for basic usage. However, they are too difficult to use in our real project. For highly customized style and function menu utility, it is much easy for us to create a new dropdown menu instead of hacking the default Flex dropdown utilities. Here is how the default flex menu looks like:

There are three files in this example applications, DropDownMenuTest.mxml, MyDropDownMenu.mxml and MyMenuItem.mxml. DropDownMenuTest.mxml is the main application file.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:local="*"
				width="100" height="300" backgroundColor="0xffffff" backgroundGradientColors="null"
				layout="absolute" viewSourceURL="srcview2/index.html">
	<local:MyDropdownMenu x="10"/>
</mx:Application>

MyDropdownMenu.mxml is the main part to implement the menu. I create and group all menu items inside and set the appear and disappear effect on the dropdown menu list.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="80" height="280" horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:local="*">
	
	<mx:Script>
		<!&#91;CDATA&#91;
			&#91;Embed(source="/res/a.jpg")&#93;
			&#91;Bindable&#93;
			public var a:Class;
			&#91;Embed(source="/res/b.jpg")&#93;
			&#91;Bindable&#93;
			public var b:Class;
			&#91;Embed(source="/res/c.jpg")&#93;
			&#91;Bindable&#93;
			public var c:Class;
			&#91;Embed(source="/res/d.jpg")&#93;
			&#91;Bindable&#93;
			public var d:Class;
			
			protected function triggerMenu(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				if(this.myMenu.visible)
				{
					this.myMenu.visible = false;
				}
				else
				{
					this.myMenu.visible = true;
				}
			}
			
			
			protected function itemSelectedHandler(event:MouseEvent):void
			{
				this.triggerMenu(null);
			}
			
		&#93;&#93;>
	</mx:Script>
	
	
	<mx:WipeDown id="wpdown" duration="300"/>
	<mx:WipeUp id="wpup" duration="300"/>
	
	<local:MyMenuItem id="mainMenu" data="{new c()}" buttonMode="true" useHandCursor="true"  click="triggerMenu(event)"/>
	
	<mx:VBox id="myMenu" x="0" y="70" width="100%" hideEffect="{wpup}"
			 showEffect="{wpdown}" verticalGap="0" visible="false">
		<local:MyMenuItem data="{new a()}" click="itemSelectedHandler(event)"/>
		<local:MyMenuItem data="{new b()}" click="itemSelectedHandler(event)"/>
		<local:MyMenuItem data="{new d()}" click="itemSelectedHandler(event)"/>
	</mx:VBox>
</mx:Canvas>

MyMenuItem.mxml class define how the menu items look like. In my example, I just simply load an image for each menu item.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
		   width="69" height="69" mouseOut="mouseOutHandler(event)"
		   mouseOver="mouseOverHandler(event)">
	
	<mx:Script>
		<!&#91;CDATA&#91;
			protected function mouseOverHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				this.setStyle("backgroundColor", 0x222222);
			}
			
			protected function mouseOutHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				this.setStyle("backgroundColor", null);
			}
			
		&#93;&#93;>
	</mx:Script>
	
	<mx:Image x="1" y="1" width="67" height="67" buttonMode="true" smoothBitmapContent="true"
			  source="{data}" useHandCursor="true"/>
</mx:Canvas>

Download the source code