Como hacer un menú expandible

Hola a todos. Tengo unas preguntas respecto al menú de:
http://www.anatol.de

Me encantó pero no tengo ni idea de como se hace. He buscado pero no encuentro nada de menús expandibles. Me gustaría saber como hacer:

Antes de seleccionar una opción:
¿Como hacer para que el menú se expanda cuando pasas por encima de las opciones del menú?

Cuando se selecciona una opción:
¿Como hacer que las miniaturas interactuen también con las opciones del menú para expandirlo hacia ambos lados y hacer espacio a éstas?

Muchas gracias.

Hola amigo
dejame decirte que apra hacer eso hay que dedicarle tiempo uffff
pero en principio el efecto de movimiento de las imagenes se llama easyn
Para que cada icono se expanda cuando colocas el mouse sobre ellos tendrias que hacer un scrip que calcule el tamaño de cada icono y recalcule la pocicion de los demas, yo tengo algo muy parecido en mi sitio, mira mi sitio y aqui te coloco el código

Código :

// Rutina que permite efecto de botones tipo 
// mac menu bar

this.stop();

this.onEnterFrame = function() {   
   if (Flag != true){ // guarda valor una sola vez
      Flag = true
      MnuBarW = this._width
      StageW = 950;      
   }   
   var Spa = 10;
   var Tmp1,Tmp2;
   
   // Verifica que la posición del mouse cambió (intenta ahorrar CPU)
   if(((MseX != this._xmouse or MseY != this._ymouse) and (this._ymouse > 0)) or N!=0){   
      // Toma posición del mouse
      MseX = this._xmouse;
      MseY = this._ymouse;         
      
       // Permite que el codigo se ejecute 50 veces 
       // para realizar ajustes finales cuando el mouse este quietoo0 fuera de la barra
      if(N<=0){
         N = 50;
      }else{
         N = N-1;
      }
      
      for(i=1; i<23; i++) {
         // Organiza todos los iconos en secuencia 
         // y con una separacion entre ellos
         eval("B"+i)._x = Spa + eval("B"+(i-1))._x + eval("B"+(i-1))._width/2 + eval("B"+(i))._width/2
         eval("B"+i)._y = B1._y;
               
         // Calcula y aplica una scala proporcional a 
         // la distancia del mouse a cada boton
         BtmX = eval("B"+i)._x;
         BtmY = eval("B"+i)._y;
         
         Scale = 200 - (Math.sqrt((MseX-BtmX)*(MseX-BtmX)+(MseY-BtmY)*(MseY-BtmY)));   
         
         // Verifica que la escala a aplicar sea 
         // mayor que 100 y menor que 150
         if(Scale < 100 or Scale > 200){
            Scale = 100
         }
         
         // Aplica la nueva escala
         eval("B"+i)._xscale = Scale;
         eval("B"+i)._yscale = Scale;
         
         // Calcula tamaño del MnuBar en funcion a su contenido
         MnuW = MnuW + eval("B"+i)._width + Spa ;
      }

      // Se ajusta la posición horizontal de la barra (Ajuste con suavidad)      
      Tmp1 = this._x;   
      Tmp2 = -((MnuBarW - StageW) * (_root._xmouse) / StageW) ;
      Tmp1 = Tmp1+(Tmp2-Tmp1)*(.09);
      this._x = Tmp1;
      
      // Se muestra el Titulo del Boton
      if(TmpTit!=Tittle){
         TmpTit=Tittle;
         txtTittle = Tittle
      }
      
      // Se ajusta la posición horizontal del titulo
      Tmp3 = objtxtTittle._x+objtxtTittle._width/2
      Tmp3 = Tmp3+(MseX-Tmp3)*(.12);
      
      // Verifica que el texto no rebase los limites
      objtxtTittle._x = Tmp3-objtxtTittle._width/2
   }
   
   // Reproduce sonido de max turning cuando el menu llega
   // a sus extremos max de posicionamiento
      if((_root._xmouse <20 or _root._xmouse>StageW-20) and this._ymouse > 0){
         MaxTurning.play();
      }else{
         MaxTurning.stop();         
      }
}

Cuando agarres un poco de idea de lo que quieres hacer bien avisanos y nosotros te podremos ayudar con la programación

Chauuu

Muchas gracias Enav por tu respuesta! El movimiento de las miniaturas veo claramente que es un easing. Pero lo que me gustaría aprender es el otro efecto que comentabas, que al posicionarte sobre un elemento éste se amplie y reajuste la posición de los elementos cercanos para hacerle sitio.

Supongo que en www.anatol.de el botón tiene el MC con las miniaturas en easing pero no se como hacer para que las otras opciones de menú se recoloquen a los lados. Lo que me gusta de esta opción es tener una sóla barra de navegación dando todas las facilidades al usuario visitante.

En www.firstbornmultimedia.com (apartado: our portfolio) es similar pero más sencillo, aquí sólo se recolocan los elementos de la derecha del elemento sobre el que nos posicionemos.

Por cierto, el efecto que busco sólo quiero que se amplie el elemento sobre el que nos posicionamos, no a modo de ampliación como hace el dock del OS X o tu web Enav:


¿que nombre recibe este efecto? me gustaría encontrar información y tutoriales por la red pero no encuentro nada.

Muchas gracias.

Aquí tienes un ejemplo de como se hace ese efecto concretamente.

Muchas gracias One, pero es que precisamente no es este el que quiero. Lo siento si no me expliqué bien.

Saludos y gracias de todos modos.