💻Tutoblog para ti #16: Sencillo menú vertical.

¡Holaa lectores! Hoy les traigo un tutorial que me habían pedido muchísimo: menús verticales para colocar en los blogs;  la verdad es que yo también lo andaba buscando, así que me entusiasmé bastante con este tutorial.
Es poquito complicado, lo relacionado con la edición, pero les aseguro que el resultado es maravilloso.
Espero que les guste el tutorial y les resulte de utilidad...

Este es el menú vertical que tengo en mi blog (aunque sale diferente):

BOOK TAGS POST LIBRE RESEÑAS TUTORIALES

☕ Paso 1:

En primer lugar, necesitan este código:

<div class="menudes">

<a href="#">NOMBRE 1</a>

<a href="#">NOMBRE 2</a>

<a href="#">NOMBRE 3</a>

<a href="#">NOMBRE 4</a>

<div class="marca"></div>

</div>

<style>

.menudes {

position: relative;

overflow: hidden;

width: 240px;

margin: 02px auto 02px;

background: #000000;

text-align:center;

font-size: 0;

}

.menudes a {

display: block;

padding: 6px;

border-bottom: 2px solid #fff;

position: relative;

z-index: 2;

color: white;

text-decoration: none;

font-size: 12px;

text-transform: uppercase;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-transition: 0.5s ease-in-out;

-moz-transition: 0.5s ease-in-out;

transition: 0.5s ease-in-out;

font-family: Geogia;

font-weight: bold;

}

.marca {

position: absolute;

top: -50%;

left: 0;

width: 100%;

height: 25%;

background: #e89999;

-webkit-transition: 0.2s ease-in-out;

-moz-transition: 0.2s ease-in-out;

transition: 0.2s ease-in-out;

z-index: 1;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.menudes a:hover {color: #000000;}

.menudes a:nth-child(1):hover ~ .marca {top: 0;}

.menudes a:nth-child(2):hover ~ .marca {top: 25%;} /* (100/nº elementos)x1 */

.menudes a:nth-child(3):hover ~ .marca {top: 50%;} /* (100/nº elementos)x2 */

.menudes a:nth-child(4):hover ~ .marca {top: 75%;} /* (100/nº elementos)x3 */

.menudes a:nth-child(5):hover ~ .marca {top: 50%;}

.menudes a:nth-child(6):hover ~ .marca {top: 50%;}

.menudes a:nth-child(7):hover ~ .marca {top: 50%;}

.menudes a:nth-child(8):hover ~ .marca {top: 50%;}

</style>

 ☕ Paso 2:

Para editar el menú:

• El # deben reemplazarlo por el link a donde ustedes quieren que ese 'botón' en particular los dirija.
• Lo que está en AZUL lo reemplazan por el nombre que tendrá el botón, por ejemplo: Reseñas, Tutoriales, Book tags, etc...
• Lo verde es el código del color en que ustedes quieren que se vea el menú sin poner el cursor encima (no olviden colocar el # en el código).
• Lo que se encuentra en morado, es hacia donde ustedes quieren posicionar el texto de cada botón: centrado (center), izquierda (left) o derecha (right).
• Lo que está en amarillo es el código del color que ustedes quieran que sea la 'franja' que se mueve a medida que se desplazan por el menú (no olviden colocar el # en el código).
• Lo que está en este color es el código del color de la letra del texto cuando la franja de color se posiciona sobre él (no olviden colocar el # en el código).

Esas son las modificaciones básicas para el menú.

☕ Paso 3:

Sólo queda colocar el código en el blog; para esto deben dirigirse a Diseño→Agregar gadget →HTML/JavaScript. 
Y hacen clic en Guardar y listo.

Cualquier duda con el código o con su colocación, no duden en comentar o envíenme un mensaje a cariavial280371@gmail.com

Hasta aquí llegó el tutorial de hoy, espero que haya resultado de su utilidad.

En cuanto al próximo tutorial, enseñaré a colocar el Widget de comentarios recientes.

Como ya me estoy quedando un poco corta con las ideas en relación con los tutoriales, les pido su ayuda. Comenten los tutoriales que les gustaría que publique, sus dudas respecto a los códigos de blogger o cualquier inquietud.

Si no quieren perderse nada, recuerden suscribirse y seguirme en mis redes sociales.

¡Un abrazo literario!