Menú Up & Down

Hey babies! Hoy traigo otro menú y este, personalmente, me encanta, me parece muy bonito, además se puede cambiar el ancho y algunas cositas más para que sea personalizado para cada uno, así que... let's go.

P R E V I E W

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y justo encima colocamos el siguiente código:

.fade-isa {

font-family: trebuchet ms;

font-size: 11px;

padding: 5px;

background-color: #COLOR DE FONDO (ROSA);

box-shadow: inset 0 0 20px #COLOR DE LA SOMBRA INTERNA (ROSA), 0 0 4px #ccc;

text-align: center;

width: TAMAÑO DEL MENÚpx;

text-transform: uppercase;

word-spacing: 5px;

letter-spacing: 1px;

-webkit-transition-duration: .80s;}

.fade-isa a {

color: #COLOR DE LA FUENTE;

text-align: center;

padding-top: 20px;

padding-bottom: 20px;

padding-left: 5px;

padding-right: 6px;

text-shadow: 2px 1px 1px #COLOR DE LA SOMBRA DEL TEXTO;

-webkit-transition-duration: .80s;}

.fade-isa a:hover {

color: #COLOR DE LA FUENTE AL PASAR EL RATÓN;

text-shadow: 2px 1px 1px #COLOR DE LA SOMBRA AL PASAR EL RATÓN;

text-align: center;

padding-top: 5px;

padding-bottom:5px;

padding-left: 5px;

padding-right: 6px;

background-color: #COLOR DEL RECUADRO (LILA);

box-shadow: inset 0 0 20px #COLOR DE LA SOMBRA DEL RECUADRO (LILA), 0 0 4px #ccc;

-webkit-transition-duration: .80s;}

 Ahora sólo necesitáis cambiar todo lo que está en negrita para ajustarlo a vuestro diseño.

2. Agregamos un gadget HTML/JavaScript con el siguiente código:

<div class="fade-isa">
<a href="LINK" title="Descripción aquí">Título</a>
<a href="LINK" title="Descripción aquí">Título</a>
<a href="LINK" title="Descripción aquí">Título</a>
<a href="LINK" title="Descripción aquí">Título</a>
<a href="LINK" title="Descripción aquí">Título</a>
<a href="LINK" title="Descripción aquí">Título</a>
<a href="LINK" title="Descripción aquí">Título</a></div>

Y de nuevo, todo lo que está en negrita se puede modificar, además de agregar más.

Y hasta aquí el tutorial. Espero que os guste y si tenéis cualquier duda, no dudéis en poneros en contacto conmigo 😊