前面在研究Flex控件与组件的时候研究了下菜单控件的编写，并小有成果。下面献上自己做的Flex的菜单组件(目前只支持2级，有动态效果,数据源为XML,AS代码）。

1.组件源代码：

package com.components.skin
{

	/**
	 *  导航控件栏，数据绑定为XML。
	 *  作者：pengyaou
	 *  The Application container has the following default characteristics:
	 *     
	 *        
	 *           特征
	 *           说明
	 *        
	 *        
	 *           XML
	 *           XML文件或者XML字符串
	 *        
	 *        
	 *           列宽度
	 *           默认150px，允许改变大小
	 *        
	 *        
	 *           行高度
	 *           默认60px，允许改变大小
	 *        
	 *        
	 *           Default skin class
	 *           spark.skins.spark.ApplicationSkin
	 *        
	 *     
	 **/
	import com.components.ArrowSkin;
	import com.events.MenuNavigationEvent;
	
	import flash.events.MouseEvent;
	
	import mx.collections.XMLListCollection;
	import mx.events.EffectEvent;
	import mx.graphics.SolidColor;
	
	import spark.components.Group;
	import spark.components.Label;
	import spark.effects.Move;
	import spark.primitives.Rect;

	public class MenuNavigation extends Group
	{
		private var menuXML:XML;

		public var itemHeight:Number=60;

		public var itemWidth:Number=150;

		private var childCount:Number=0;

		private var fillColor:uint=0xffffff;

		private var fontColor:uint=0x212121;

		private var childMouseColor:uint=0xeb3c0f;

		private var selectIndex:Number=0;

		private var mMoveIndex:Number;

		private var cursorGroup:Group;

		private var mMove:Move;

		private var isShowChildren:Boolean=false;

		private var parentIndex:Number=0;

		private var childrenGroup:Group=new Group();

		public function CreateMenu(aMenuXML:XML):void
		{
			menuXML=aMenuXML;
			var aMenuXMLListCollection:XMLListCollection=new XMLListCollection(menuXML.TITLE);
			childCount=aMenuXMLListCollection.length;
			width=childCount * itemWidth;
			height=itemHeight;
			for (var i:Number=0; i < childCount; i  )
			{
				var mTxt:String=aMenuXMLListCollection[i].TITLENAME;
				CreateMenuButton(i, mTxt);
			}
			CursorComplete();
		}

		private function CreateMenuButton(aIndex:Number, aTile:String):void
		{
			var mGroup:Group=new Group();
			mGroup.width=itemWidth;
			mGroup.height=itemHeight;
			mGroup.name=aIndex.toString();
			mGroup.id=aTile;
			var mRect:Rect=new Rect();
			mRect.width=itemWidth;
			mRect.height=itemHeight;
			var mSolidColor:SolidColor=new SolidColor(fillColor);
			mRect.fill=mSolidColor;
			var mLabel:Label=new Label();
			mLabel.text=aTile;
			mLabel.setStyle("color", fontColor);
			mLabel.verticalCenter=0;
			mLabel.horizontalCenter=0;
			mLabel.setStyle("textAlign", "center");
			var mLineRightRect:Rect=new Rect();
			mLineRightRect.width=1;
			mLineRightRect.height=itemHeight;
			mLineRightRect.right=0;
			var mLineRSolidColor:SolidColor=new SolidColor(0xebebeb);
			mLineRightRect.fill=mLineRSolidColor;
			mGroup.addElement(mRect);
			mGroup.addElement(mLabel);
			mGroup.addElement(mLineRightRect);
			if (aIndex == 0)
			{
				var mLineLeftRect:Rect=new Rect();
				mLineLeftRect.width=1;
				mLineLeftRect.height=itemHeight;
				mLineLeftRect.left=0;
				mLineLeftRect.fill=mLineRSolidColor;
				mGroup.addElement(mLineLeftRect);
			}
			mGroup.left=aIndex * itemWidth;
			addElement(mGroup);
			mGroup.addEventListener(MouseEvent.MOUSE_MOVE, OnMenuMousemMove);
			mGroup.addEventListener(MouseEvent.ROLL_OUT, OnMenuROLL_OUT);
			mGroup.addEventListener(MouseEvent.CLICK, OnMenuClick);
		}

		private function CreateChildren(aIndex:Number):void
		{
			
			childrenGroup.removeAllElements();
			var aMenuXMLListCollection:XMLListCollection=new XMLListCollection(menuXML.TITLE);
			var childrenList:XMLListCollection=new XMLListCollection(aMenuXMLListCollection[aIndex].CHILD.TITLE);
			childrenGroup.top=itemHeight;
			childrenGroup.left=aIndex * itemWidth;
			for (var i:Number=0; i < childrenList.length; i  )
			{
				parentIndex=aIndex;
				var mChildGroup:Group=new Group();
				mChildGroup.height=40;
				mChildGroup.width=itemWidth;
				var mRect:Rect=new Rect();
				mRect.width=itemWidth;
				mRect.height=40;
				var mSolidColor:SolidColor=new SolidColor(fillColor);
				mRect.fill=mSolidColor;
				mChildGroup.addElement(mRect);
				var mLabel:Label=new Label();
				mChildGroup.top=i * 40;
				mLabel.text=childrenList[i].TITLENAME;
				mLabel.setStyle("color", fontColor);
				mLabel.verticalCenter=0;
				mLabel.horizontalCenter=0;
				mLabel.setStyle("textAlign", "center");
				mChildGroup.id=childrenList[i].TITLENAME;
				mChildGroup.addElement(mLabel);
				childrenGroup.addElement(mChildGroup);
				mChildGroup.addEventListener(MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void
				{
					var currentGroup:Group=event.currentTarget as Group;
					var currentRect:Rect=currentGroup.getElementAt(0) as Rect;
					var mLabel:Label=currentGroup.getElementAt(1) as Label;
					mLabel.setStyle("color", 0xffffff);
					var currentSolidColor:SolidColor=new SolidColor(childMouseColor);
					currentRect.fill=currentSolidColor;
				});
				mChildGroup.addEventListener(MouseEvent.ROLL_OUT, function(event:MouseEvent):void
				{
					var currentGroup:Group=event.currentTarget as Group;
					var currentRect:Rect=currentGroup.getElementAt(0) as Rect;
					var mLabel:Label=currentGroup.getElementAt(1) as Label;
					mLabel.setStyle("color", fontColor);
					var currentSolidColor:SolidColor=new SolidColor(fillColor);
					currentRect.fill=currentSolidColor;
				});
				mChildGroup.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void
				{
					childrenGroup.removeAllElements();
					selectIndex=aIndex;
					dispatchEvent(new MenuNavigationEvent((event.currentTarget as Group).id));
				});
			}
			addElement(childrenGroup);
			childrenGroup.addEventListener(MouseEvent.ROLL_OUT, childRollOut);
		}

		private function childRollOut(event:MouseEvent):void
		{
			childrenGroup.removeAllElements();
			mMoveCursor(selectIndex);

		}

		private function CursorComplete():void
		{
			var mGroup:Group=new Group();
			mGroup.width=itemWidth;
			mGroup.height=10;
			var mRect:Rect=new Rect();
			mRect.width=itemWidth;
			mRect.height=10;
			var mSolidColor:SolidColor=new SolidColor(0xeb3c0f);
			mRect.fill=mSolidColor;
			mRect.left=0;
			mRect.top=0;
			mGroup.addElement(mRect);
			this.addElement(mGroup);
			cursorGroup=mGroup;
		}


		private function mMoveCursor(aIndex:Number):void
		{
			if (mMove == null)
			{
				mMove=new Move();
			}
			else
			{
				mMove.stop();
				mMove.removeEventListener(EffectEvent.EFFECT_END, mMoveEnd);
			}
			mMoveIndex=aIndex;
			mMove.target=cursorGroup;
			mMove.xTo=aIndex * itemWidth > cursorGroup.x ? aIndex * itemWidth   30 : aIndex * itemWidth - 30;
			mMove.duration=500;
			mMove.play();
			mMove.addEventListener(EffectEvent.EFFECT_END, mMoveEnd);
		}

		private function mMoveEnd(event:EffectEvent):void
		{
			var buffermMove:Move=new Move();
			buffermMove.target=cursorGroup;
			buffermMove.duration=500;
			buffermMove.xTo=mMoveIndex * itemWidth;
			buffermMove.play();
			buffermMove.addEventListener(EffectEvent.EFFECT_END, function(event:EffectEvent):void
			{
				buffermMove.xTo=mMoveIndex * itemWidth;
			});
		}

		private function OnMenuClick(event:MouseEvent):void
		{
			selectIndex=Number((event.currentTarget as Group).name);
			dispatchEvent(new MenuNavigationEvent((event.currentTarget as Group).id));
		}

		private function OnMenuMousemMove(event:MouseEvent):void
		{
			var mCurrentGroup:Group=event.currentTarget as Group;
			var mIndex:Number=Number(mCurrentGroup.name);
			if (mMoveIndex != mIndex)
			{
				mMoveCursor(mIndex);

			}
			CreateChildren(mIndex);
		}

		private function OnMenuROLL_OUT(event:MouseEvent):void
		{
			var currentIndex:Number=Number((event.currentTarget as Group).name)
			if (parentIndex != currentIndex)
			{
				if (mMoveIndex != selectIndex)
				{
					mMoveCursor(selectIndex);
				}
			}
		}
	}
}

2.组件源数据格式（XML):

private var mMenuTitleXML:XML=首页11班级信息11班级活动11班级动态11课题研究11GIS专题1程序开发专题0其他0留言10聊天室10;

3.组件使用方法：

protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
private var mMenuContainerSkin:MenuNavigation=new MenuNavigation();
				mMenuContainerSkin.top=0;
				mMenuContainerSkin.itemHeight=65;
				mMenuContainerSkin.left=250;
				mMenuContainerSkin.CreateMenu(mMenuTitleXML);
				this.addElementAt(mMenuContainerSkin, numElements);
				mMenuContainerSkin.addEventListener(MenuNavigationEvent.MENUNAVIGATION_CLICK, function(event:MenuNavigationEvent):void
				{
					var name:String=event.name;
					switch (name)
					{
						case "首页":
							var request:URLRequest=new URLRequest("GIS.html");
							navigateToURL(request, "_self");
							;
							break;
						case "聊天室":
							NewUrl("Chat.html");
							break
					}
				});
			
			}

4.组件效果：

演示地址:http://old.pengyaou.com/Example/flash/Test1/GISInfo.html