ūüíĽ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.

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

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

    ResponderEliminar
    Respuestas
    1. Holaa, espero que te quede genial!
      Un abrazo ^-^

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

    ResponderEliminar
    Respuestas
    1. Gracias a ti por leer y comentar la entrada!
      Besos ♥

      Eliminar
  4. Hola!!

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

    ResponderEliminar
    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!

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

    ¡SE MUUUUUUUUUUY FELIIIIIIIIIIIIIIIIIIIIIIZ! :):)

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

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

      Eliminar
  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

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

      Eliminar
  8. ¡Hola, bonita!
    Siempre traes tutoriales guays y √ļtiles as√≠ que te lo agradezco much√≠simo *^*
    ¡Eres genial! ♥

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

      Eliminar
  9. ¡Hola! muchas gracias por el tutorial, hacia tiempo que buscaba algo as√≠.
    Un beso.

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

      Eliminar
  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

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

      Eliminar

¡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