Menú pestañas deslizantes

Este menú tan vistoso y alegre lo encontré en CODROP como puede comprobarse en la entrada original no hay ninguna explicación excepto modificar los colores del menú que dicho sea de paso en la práctica esos cambios no se hacen visibles dónde están indicados.

Después darle unas vueltas conseguí añadirlo y hacerlo funcionar con algún que otro problema que fue solventado gracias a Vagabundia al que disimuladamente asalté y gentilmente se ofreció a modificar el script ya que no tenía otro remedio.

Una vez todo en orden comentamos sobre la cantidad de estilos que requiere este menú y el poco sentido que tienen esos mismos estilos cuando los colores se modifican en el script.

Nos dejamos de hablar y ponemos manos a la obra si queremos conseguir este menú, no sin antes armarse de un poco de paciencia para poder personalizarlo a nuestro gusto.

Comenzamos buscando ]]></b:skin> y justo después añadimos el contenido de este archivo.

Si estamos usando jQuery el siguiente paso lo vamos a omitir, de no estar usándolo añadimos a continuación:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Guardamos los cambios, y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadimos:

<div style="position:relative;">
<ul class="menu">
<li><a href="url-página">Home</a></li>
<li><a href="url-página">Portafolio</a></li>
<li><a href="url-página">Trabajos</a></li>
<li><a href="url-página">Perfil</a></li>
<li><a href="url-página">Indice</a></li>
<li><a href="url-página">Contacto</a></li>
</ul>
</div>
<div style="clear:both;"></div>

❋En url-página añadimos la url del sitio que vamos a enlazar.
❋El texto que hará de enlace lo sustituimos por el nuestro.

Personalizamos el menú

Buscaremos en plantilla edición de HTML dónde añadimos el contenido del archivo y al final del todo veremos algo así:

<script type='text/javascript'>

$(document).ready(function() {

$(&#39;.menu&#39;).tagdrop({tagPaddingTop: &#39;60px&#39;,bgColor: &#39;#xxxxxx&#39;,bgMoverColor: &#39;#xxxxxx&#39;,textColor: &#39;#xxxxxx&#39;});

});

</script>

❋ bgColor: Color de fondo de la pestaña tal y como se muestra al actualizar la página.
❋ bgMoverColor: Color de fondo de la pestaña efecto hover.
❋ textColor: Color de texto efecto hover.
Como puede verse he señalado con xxxxxx el lugar donde debemos añadir el color.

Para el color de texto de la pestaña buscaremos:

.menu li a {

............

............

............

............

color: #FFF;

}