this tutorial will use the tweenEffects class so make sure you have understood the twenEffects class tutorial, so lets begin by viewing the example below of what you are going to create,

the Example


the Steps

1. Create a new flash document 200x200.
2. Set the background to gray (it won't work if its not gray :P ).
3. Open your library (ctrl+L) and create a new movie clip name it "menu" by clicking on the icon showed bellow in the screenshot.


4. Double click the new movie clip "menu" you created, and grab the text tool and on the stage type with the font of your choice but make it size about 15 px, "MENU ::" and align it to the top right of the movie "menu".



5. Draw a rectangle 100x20 and convert it to a movie clip name it mask and give it the instance name "mask_mc" and center it to the top left of the menu movie clip

6. Create a movie clip name it menuItem and in it place a dynamic text (font 12) with the instance name text_txt and center it to the top left, also export this movie clip for AS

7. Same as step six but with font 15 and name is menuItemB


the Code
 
Now let's take a look at our code with it's comment
on a new layer in the menu movie clip place this code.

// define our Menu Item, it can be loaded from an extenal file though but u need to
//parse the content into an array and pass it to this movie clip
var text_array = ["Home", "Portfolio", "Downloads", "About"];
//define small menu item Array
var sm_array = [];
//define big menu array
var bm_array = [];
//create the big menu and the small menu holder
var bmenu = this.createEmptyMovieClip("bmenu", 1);
var smenu = this.createEmptyMovieClip("smenu", 0);
//dynamiclly set the mask or it will be no roll over event for the masked _mc
bmenu.setMask(mask_mc);
// create an object from the class tween effect
var te = new tweenEffects();
//function that will initiate our menu.
function init() {
 //go through each item in our text array
 for (var i = 0; i<text_array.length; i++) {
  //dynamiclly attach a menuItem movie clip from the library.
  depth = smenu.getNextHighestDepth();
  temp = smenu.attachMovie("menuItem", "menuItem"+i, depth);
  //dynamiclly attach a menuItemB(big) movie clip from the library.
  depth = bmenu.getNextHighestDepth();
  tempB = bmenu.attachMovie("menuItemB", "menuItemB"+i, depth);
  //set the _y to be aligned vertically one to each other
  temp._y = mask_mc._height+i*temp._height;
  tempB._y = mask_mc._height+i*tempB._height;
  //and set it s corresponding text
  temp.text = tempB.text=text_array[i];
  //define onRelease event
  temp.onRelease = function() {
   //call the update function
   update(this)
  };
  //save the small(big) menuItem(B) in the sm_array for later use
  sm_array.push(temp);
  bm_array.push(tempB);
 }
}
//function that will handle the onRelease for each menuItem(small of course)
function update(_mc) {
 //this found var will be used for a test you will see later.
 var found;
 //counter up and counter down
 var cu, cd;
 cu = 1;
 cd = 0;
 //search the position of the clicked _mc
 for (var i = 0; i<sm_array.length; i++) {
  if (sm_array[i] == _mc) {
   break;
  }
 }
 //save it in counter up
 cu = i;
 //go through the small array _mcs
 for (var i = 0; i<sm_array.length; i++) {
  //if the current sm_array[i] equal the pressed _mc slide it to 0 0 coordinate
  if (sm_array[i] == _mc) {
   //sliding small
   te.gotoY(sm_array[i], 0);
   //sliding big
   te.gotoY(bm_array[i], 0);
   //set the found to true so the bottum _mc will slide to somewhere else
   found = true;
  } else {
   if (found) {
    //this is the _mcs that are above the _mc that is clicked
    yf = mask_mc._height+cd*sm_array[i]._height;
    te.gotoY(sm_array[i], yf);
    yf = mask_mc._height+cd*bm_array[i]._height;
    te.gotoY(bm_array[i], yf);
    cd++;
   } else {
    //this is the _mcs that are under the _mc that is clicked
    yf = -cu*sm_array[i]._height;
    te.gotoY(sm_array[i], yf);
    yf = -cu*bm_array[i]._height;
    te.gotoY(bm_array[i], yf);
    cu--;
   }
  }
 }
}
//initate our menu.
init();


Now drag the menu movie clip from the library (ctrl+L) and place it on the stage, and hit (ctrl+Enter) to see the result.

That's it, i hope this tutorial helps, and if you have a question the forums is always ready to answer ;)

Happy Flashing :) .