Fx-Elements (Menú)

Es el menú de colorines que tengo en la cabecera de esta página.

Así lo hice:

1. .- SCRIPTS:
   

   
   <script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   
   window.addEvent(&#39;domready&#39;, function(){
   
   var szNormal = 117, szSmall = 100, szFull = 219;
   
   
   
   var kwicks = $$(&quot;#kwicks .kwick&quot;);
   
   var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
   
   kwicks.each(function(kwick, i) {
   
   kwick.addEvent(&quot;mouseenter&quot;, function(event) {
   
   var o = {};
   
   o[i] = {width: [kwick.getStyle(&quot;width&quot;).toInt(), szFull]}
   
   kwicks.each(function(other, j) {
   
   if(i != j) {
   
   var w = other.getStyle(&quot;width&quot;).toInt();
   
   if(w != szSmall) o[j] = {width: [w, szSmall]};
   
   }
   
   });
   
   fx.start(o);
   
   });
   
   });
   
   
   
   $(&quot;kwicks&quot;).addEvent(&quot;mouseleave&quot;, function(event) {
   
   var o = {};
   
   kwicks.each(function(kwick, i) {
   
   o[i] = {width: [kwick.getStyle(&quot;width&quot;).toInt(), szNormal]}
   
   });
   
   fx.start(o);
   
   })
   
   
   
   });
   
   </script>
   
   



2. .- CSS:
   

   
   #kwicks_container {
   
   background-color: violet;
   
   height: 100px;
   
   }
   
   #kwicks {
   
   position: relative;
   
   }
   
   
   
   #kwicks .kwick {
   
   float: left;
   
   display: block;
   
   width: 117px;
   
   height: 100px;
   
   }
   
   
   
   #kwick_red {background-color: red;}
   
   #kwick_orange {background-color: orange;}
   
   #kwick_yellow {background-color: yellow;}
   
   #kwick_green {background-color: green;}
   
   #kwick_blue {background-color: blue;}
   
   #kwick_indigo {background-color: indigo; color: #fff; }
   
   #kwick_violet {background-color: violet;}
   
   
   
   
   
   



3. .- HTML:
   

   
   <div id='kwicks_container'>
   
   <h1>TESTS</h1>
   
   <ul id='kwicks'>
   
   <li class='kwick' id='kwick_red'><a href='http://cafe-junio.blogspot.com/'><span>Epílogo</span></a></li>
   
   <li class='kwick' id='kwick_orange'><a href='http://cuentos-historias.blogspot.com/'><span>Revolutum</span></a></li>
   
   <li class='kwick' id='kwick_yellow'><a href='http://nada-junio.blogspot.com/'><span>Nada</span></a></li>
   
   <li class='kwick' id='kwick_green'><a href='http://hiperadri.blogspot.com/'><span>El Juego...</span></a></li>
   
   <li class='kwick' id='kwick_blue'><a href='http://imagen-junio.blogspot.com/'><span>Imagen</span></a></li>
   
   <li class='kwick' id='kwick_indigo'><a href='http://slideejemplo-junio.blogspot.com/'><span>Slide-Ejemolo</span></a></li>
   
   <li class='kwick' id='kwick_violet'><a href='http://jj-junio.blogspot.com/'><span>Inicio</span></a></li>
   
   </ul>
   
   <span class='clr'><!-- spanner --></span>
   
   </div>
   
   

Este menú es sólo un ejemplo... a mí me gusta más el que he confeccionado para IMAGEN

Web de referencia: MOOTOOLS