Fw: Accordion menu

Hi,

No, as I said I didn't include any child-animation or visibility in the code.

An the structure can absolutely be XML as a start instead, but it's kind of hard to store references to the different menu items in an XML so it needs to be converted into Arrays, DisplayObject hierarchies, Object or custom classes for you to be able to loop through references.

But I surely would prefer the native structure to be an XML since the most navigations can be translated into the XML-structure very neatly and simple.

The menu items I would probably make an own class that extends Sprite, then you can make simple showChildren(), hideChildren() methods in it and have a "cleaner" code to work with. Otherwise I would make them as plain Sprites and maintain data and children in Arrays, Vectors or Objects.

The MovieClip-class I don't use anymore since I don't need the timeline-functionality.

I will see if I can help you with more code-samples later today. But for now I have to work =P

//Bob

I would say that simplifying your code is not possible.

But it is possible to make it dynamic rather then hard coded.

Say that you have all your menu items for the top level in an Array I would do it something like this

private const TOP_MENU_ITEM_HEIGHT:Number = 30;
private const CHILD_MENU_ITEM_HEIGHT:Number = 20;
for( var i:int = 0; i < menuItems.length; i++ )
{
     menuItems.addEventListener( MouseEvent.ROLL_OVER, showMenu );
     menuItems.addEventListener( MouseEvent.ROLL_OUT, hideMenu );
}
private function showMenu( event:MouseEvent ):void
{
     var followingItemIndex:int = menuItems.indexOf( event.target ) + 1;
     var childHeight:Number = event.target.numChildren * CHILD_MENU_ITEM_HEIGHT;
     for( var i:int = 0; i < menuItems.lengt; i++ )
     {
          if( i < followingItemIndex )
          {
               // Tween all top level menu items to the y of its previous siblings height
               TweenLite.to( menuItems, .2, { y:i*TOP_MENU_ITEM_HEIGHT, ease:Linear.easeIn } );
          }
          else
          {
               // Tween all top level menu items to the y of its previous siblings height + the folded out children height
               TweenLite.to( menuItems, .2, { y:i*TOP_MENU_ITEM_HEIGHT + childHeight:Number, ease:Linear.easeIn } );
          }
     }
}

In this case I've used the conclusion that the only children in the top level items are child menu items.

And in this version the child menu items aren't made visible or invisible at any time, so you have to make that adjustment to.

As I said.. it's not more simple, but more dynamical. And this code is i no way complete, it's just stub to lead the way =)

//Bob