Vertical, verticaly expanding, nested, xml-driven, drop-down menu

programming flash
1

Hello.

I found a great tut about writing nested menu:
http://tutorials.flashmymind.com/2009/02/advanced-xml-menu-with-actionscript-3/

…and am writing my own now. Almost everything is working, but there’s a one functionality i cannot write.

If i click the last mainbutton everything works fine.

But when i click on the first, second or third mainbutton, i want the lower mainbutton(s) to make a free space for subbuttons of the clicked mainbutton, by going down for a proper distance. Now, they just overlap.

There’s a .fla (cs4) and .xml download link.

And there is graphical explanation of what i want to achieve:

And theres a code, if somones preferes more than .fla :

var menuPosY:Number = 20;
var menuPosX:Number = 20;
var submenuPosX:Number = 50;
var menuYdist:Number = 35;
var xmlPath:String = "menu.xml";

var xml:XML;
var selectedMenu:Array;
var menuCounter:uint = 0;


var loader = new URLLoader();
loader.load(new URLRequest(xmlPath));
loader.addEventListener(Event.COMPLETE, xmlLoaded);
 

function xmlLoaded(e:Event):void {
 
	//Make sure we're not working with a null loader
	if ((e.target as URLLoader) != null )
	{
		xml = new XML(loader.data);
		xml.ignoreWhitespace = true;
 
		createMenus();
	}
}
 

function createMenus():void 
{
	for each (var menu:XML in xml.menu) 
	{
		var menuItems:Array = createMenu(menu);
 
		for (var i= 0; i< menuItems.length; i++) 
		{
			menuItems*.x = menuPosX;
			menuItems*.y = menuPosY + (menuCounter-1) * menuYdist;
			
			addChild(menuItems*);
		}
	}
}
 
function createMenu(menu:XML):Array 
{
	var menuItems:Array = new Array();
 
	for each (var item:XML in menu.item) 
	{
		var menuItem:MenuItem = new MenuItem();
		menuItem.menuText.text = item.toString();
		menuItem.mouseChildren = false;
 
		menuItems.push(menuItem);
	}
 
	var mainItem:MenuItem = new MenuItem();
	mainItem.mouseChildren = false;
	menuItems.push(mainItem);
	
	mainItem.belongsToMenu = menuItems;
	mainItem.menuText.text = menu. @ id; //Set the "id" attribute to be the main item's text
 
	mainItem.addEventListener(MouseEvent.CLICK, mainItemClicked);
 
	menuCounter++;
 
	return menuItems;
}
 
function mainItemClicked(e:Event):void {
 
	//Animate the previous menu down if there is one
	if (selectedMenu) {
		for (var i = 0; i<  selectedMenu.length-1; i++) {
			selectedMenu*.x = menuPosX;
			selectedMenu*.alpha = 0;
		}
	}
 
	var clickedMenu:Array = e.target.belongsToMenu;
	
	selectedMenu = clickedMenu;



	for (var j =0; j<  selectedMenu.length-1; j++) {
 
		var item = selectedMenu[j];
 
		var targetX:Number = submenuPosX;
		var targetY:Number = e.target.y + menuYdist * (j+1);
		
		item.x = targetX;
		item.y = targetY;
		
		item.alpha = 1;
	}
}

THANKS IN ADVANCE