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á subrayado 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></div>

Y de nuevo, todo lo que está subrayado 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 😊