Menu para blog – de Pesta??as

  • septiembre 23, 2010
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.
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;
}

No Comments Found