Tutorial menú Imagen

Hey babies! Hoy vengo con un nuevo tutorial de menú, ya que he visto que no subo ninguno desde el año pasado (¡Ja! ¿Pensabais que ya no volvería a hacer la broma? XD) y este menú es o era muy usado en los diseños de Tumblr y digo era porque hace mucho que perdí un poco las ganas de entrar en Tumblr y no se qué se lleva ahora por esos lugares.

P R E V I E W

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

/* --- Imagen ------- */

.imagem{background: url('URL imagen') top left no-repeat; width: 220px; height: 300px;}

/* --- Menu ------- */

.menu{width: 210px; position: absolute; opacity: 0; -webkit-transition: all 1s ease; -moz-transition:

all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; margin: 5px;}

.menu a, .menu span{background: #b7a89f; color: #ffffff; text-shadow: 1px 1px 0 #9f8b7d; text-align: center;

font-family: Verdana; font-size:8px; text-transform: uppercase; border-left: 4px double #9f8b7d;

cursor: pointer; display: inline-block; margin: 1px 1px 0px 0px; padding: 5px 0; display: inline-block; width: 47%;}

/* --- Hover do menu ------- */

.imagem:hover .menu{opacity: 1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}

Como siempre, todo lo que está en negrita se puede cambiar, el resto, si no entendéis mucho de html es mejor dejarlo tal y como está :)

2. Ahora solo falta añadir un gadget HTML/Javascript con el siguiente código:

<div class="imagem"><div class="menu">
<a href="link">Texto</a>
<a href="link">Texto</a>
<a href="link">Texto</a>
<a href="link">Texto</a>
<a href="link">Texto</a>
<a href="link">Texto</a>
</div></div>

Ahora sólo queda cambiar el link por nuestro enlace y donde pone Texto el nombre que queremos ponerle y c'est fini.

Y hasta aquí el tutorial de hoy. Espero que os haya gustado y si tenéis cualquier duda, no dudéis en poneros en contacto conmigo :3