Menu de Colores con JQuery

Hoy les traigo un menú horizontal, pueden ver un ejemplo en nuestro blog de pruebas.
JQuery le da un efecto de Desplazamiento suave hacia abajo El menú de colores tiene una animación suave a causa de una cosa llamada "flexibilización".

primero de todo debemos agregar el siguiente codigos justo antes de </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
 <style type='text/css'>
.menucolor ul { margin:0; padding:0; }

.menucolor li { border-radius:6px; -khtml-border-radius:6px; -ms-border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; font-size:16px; font-family:Arial; width:100px; height:50px; float:left; color:#191919; text-align:center; overflow:hidden; }

.menucolor a { color:#FFF; text-decoration:none; }
.menucolor a:hover { color:#000; text-decoration:none; }

.menucolor p { font-size:16px; font-family:Arial; padding:0px 5px; }

.menucolor .subtext{ padding-top:10px; font-size:12px; font-family:Arial; }

.green{background:#6AA63B url(&#39;http://buildinternet.com/live/smoothmenu/images/green-item-bg.jpg&#39;) top left no-repeat;}
.yellow{background:#FBC700 url(&#39;http://buildinternet.com/live/smoothmenu/images/yellow-item-bg.jpg&#39;) top left no-repeat;}
.red{background:#D52100 url(&#39;http://buildinternet.com/live/smoothmenu/images/red-item-bg.jpg&#39;) top left no-repeat;}
.purple{background:#5122B4 url(&#39;http://buildinternet.com/live/smoothmenu/images/purple-item-bg.jpg&#39;) top left no-repeat;}
.blue{background:#0292C0 url(&#39;http://buildinternet.com/live/smoothmenu/images/blue-item-bg.jpg&#39;) top left no-repeat;}
</style>

Ahora Nececitamos Pegar el Script justo antes de </body>:

<script src='http://buildinternet.com/live/smoothmenu/js/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
  $(&quot;.menucolor a&quot;).click(function(){
   $(this).blur();
  });
  $(&quot;.menucolor li&quot;).mouseover(function(){
   $(this).stop().animate({height:&#39;150px&#39;},{queue:false, duration:600, easing: &#39;easeOutBounce&#39;})
  });
  $(&quot;.menucolor li&quot;).mouseout(function(){
   $(this).stop().animate({height:&#39;50px&#39;},{queue:false, duration:600, easing: &#39;easeOutBounce&#39;})
  });
});
</script>

En los 2 codigos se encuentran arriba esta el CSS que hay que añadir
y el efecto deslizante hacia abajo.

Ahora en un Elemento HTML/Javacript Pegamos el Siguiente Codigo:

<div class="menucolor">
<ul>
<li class="green"><p><a href="#">Pagina 1</a></p>
<p class="subtext">descripción 1</p></li>

<li class="yellow"><p><a href="#">Pagina 2</a></p>
<p class="subtext">descripción 2</p></li>

<li class="red"><p><a href="#">Pagina 3</a></p>
<p class="subtext">descripción 3</p></li>

<li class="blue"><p><a href="#">Pagina 4</a></p>
<p class="subtext">descripción 4</p></li>

<li class="purple"><p><a href="#">Pagina 5</a></p>
<p class="subtext">descripción 5</p></li>
</ul>
</div>

 Cambiamos lo que Esta en Color "Rojo" por nuestros datos.
Lo vi En../Myestilodeyo