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

domingo, 17 de julio de 2016

¡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):



 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ñoAgregar 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!

20 comentarios:

  1. Hola. Me viene de perlas este tutorial porque ahora mismo las secciones las tenía en un lado del blog pero a base de imágenes y era poco profesional no, lo siguiente. Me salvas la vida de nuevo. Mil gracias :)
    Un saludo.

    ResponderBorrar
    Respuestas
    1. Hola Lau! me alegra haberte salvado la vida jaja
      Un besito ♥

      Borrar
  2. Hola, excelente tutorial, espero ponerlo a prueba n.n
    Te mando un abrazo :3

    ResponderBorrar
  3. Mil gracias, guapa. Tomo nota porque es una de las cosas que quiero cambiar en el blog. Besos

    ResponderBorrar
  4. Hola!!

    Gracias guapa!! Sabes cómo se hace para que tenga el efecto deslizante??

    ResponderBorrar
    Respuestas
    1. Holaa!
      Para que tenga el efecto deslizante modificas lo que está luego de:
      .menudes a:hover {color: #000000;}
      allí puedes modificar el tamano de la franja que se desliza y si no la quieres directamente no pones *none* en lugar del código del color de la franja...
      espero que haya resuelto tu duda jaja
      Besos!

      Borrar
  5. La verdad es que se queda requetelindo ^-^

    ¡SE MUUUUUUUUUUY FELIIIIIIIIIIIIIIIIIIIIIIZ! :):)

    ResponderBorrar
  6. Gracias por el tutorial, lo tomaré en cuenta ;)
    Saludos!!

    ResponderBorrar
    Respuestas
    1. Hola Giovanna!
      Que bueno que lo tomes en cuenta :)
      Saludos *-*

      Borrar
  7. Muchas gracias! Yo estoy buscando un menú con pestañas, por ejemplo, si pone "secciones", que pinches y salgan pestañas (booktags, reseñas, etc), pero ninguno de los que encuentro me sirve.
    Estas entradas son súper útiles.
    Un beso
    th3readersdiary

    ResponderBorrar
    Respuestas
    1. Holaa Marian! muchas gracias por comentar el tutorial que quieres, lo estaré publicando en las próximas semana :)
      Un abrazo ♥

      Borrar
  8. ¡Hola, bonita!
    Siempre traes tutoriales guays y útiles así que te lo agradezco muchísimo *^*
    ¡Eres genial! ♥

    ResponderBorrar
    Respuestas
    1. ¡Hola Patri!
      Yo te agradezco por siempre estar presente en mi blog ^-^
      Un abrazo enooorme ♥

      Borrar
  9. ¡Hola! muchas gracias por el tutorial, hacia tiempo que buscaba algo así.
    Un beso.

    ResponderBorrar
    Respuestas
    1. ¡Hola Lau!
      Te agradezco por comentar la entrada, espero que el tutorial resulte de tu utilidad :)
      Beso!

      Borrar
  10. no sabes lo bien que me hubiera venido este post hace un par de semanas jejej
    esta muy bien explicado
    un beso
    tu nueva seguidora
    Ainhoa
    infinitylife9.blogspot.com

    ResponderBorrar
    Respuestas
    1. Hola Ainhoa!
      Que bueno que te parezca bien explicado :)
      Gracias por comentar y covertirte en nueva seguidora jaja
      Un abrazo!

      Borrar

¡Hola lectores!
Si amas ♥ el olor a libro como yo, no puedes irte
sin antes dejar un comentario
¡Siempre los devuelvo!
Por favor evita hacer spoilers y que prevalezca el
respeto ante todo.
♥ Tu opinión es muy importante para mí♥

Santa Template by Mery's Notebook © 2014