Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Menú en cabecera. No me anima ir a clases.


HI! Aquí Kuma en otro día más de vida  ...si ya sé sonó depresivo . DON'T WORRY! No estoy en mi etapa emo . Pasa que últimamente {desde que inició este mes} no me anima ir a la academia para las lecciones de inglés. ¿POR QUÉ? Pues porque el teacher solo hace hora y no hacemos clases!! AAAAAAAH!!! Sinceramente ando pensando en desgraciarme con ese hombre  -Kuma sacando su saco de raptar y su hacha. Bueno ya en serio no me anima ir las clases pero igual estoy yendo, y me sigo preguntando por qué lo hago .

A LO DE HOY! Como dije ayer, hoy es día de tutorial al pedido. Menú en la cabecera, creo que no necesito describirlo {el nombre lo dice todo }. Pero para mal entendedor abajo dejo una captura.


Código: Debo aclarar que el código del menú no es mio, así que al final dejo los créditos respectivos. Sin embargo, el método que empleé para ubicarlo en la cabecera es 100% mio {una de las tantas cosas que pasa cuando traveseo }.

1RO: Ve a Plantilla y antes de ]]></b:skin> pega el sgte. código y guarda.
@-webkit-keyframes agitado {
from {-webkit-transform: rotate(10deg);}
to {-webkit-transform: rotate(-10deg);}
}
@-moz-keyframes agitado {
from {-moz-transform: rotate(10deg);}
to {-moz-transform: rotate(-10deg);}
}
@-o-keyframes agitado {
from {-o-transform: rotate(10deg);}
to {-o-transform: rotate(-10deg);}
}
.menu {display: inline-block;
font-family: 'Arial';
font-size: 14px;
background: #ff00bf;
padding: 2px;
text-align: center;
border-radius: 5px;
border: 1px dashed #000;
color: #FFFFFF;
cursor: pointer;
text-shadow: 2px 2px 2px #000000;
width: 100px;
text-decoration:none;
}
.menu:hover {
-webkit-animation-name: agitado;
-webkit-animation-duration: .01s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: agitado;
-moz-animation-duration: 0.1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-o-animation-name: agitado;
-o-animation-duration: 0.1s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
}
Personaliza:
Rojo: Tamaño del texto
Naranja: Color del fondo
Amarillo: Tamaño, tipo & color del borde
Verde: Color del texto
Celeste: Tamaño & color de la sombra del texto
Azul: Ancho del menú

2DO: Ve a Diseño y en un nuevo gadget de HTML/Javascript pega el sgte. código y guarda.
<!--MENU-->
<div style='position: absolute; top: -80px; margin-left: 0px;'>
<a class='menu' href='URL' style='background: #a43ff2;'>CATEGORIA</a>
<a class='menu' href='URL' style='background: #a43ff2;'>CATEGORIA</a>
<a class='menu' href='URL' style='background: #a43ff2;'>CATEGORIA</a>
<a class='menu' href='URL' style='background: #a43ff2;'>CATEGORIA</a>
</div>
<!--END MENU-->
Personaliza:
Para agregar otra categoría más, agrega el sgte. código antes de </div>
<a class='menu' href='URL' style='background: #a43ff2;'>CATEGORIA</a>

  • Vale esta parte es mía: style='position: absolute; top: -80px; margin-left: 0px;' 

Fucsia: Distancia vertical. Cambia el número para movilizar el menú hacia arriba o abajo.
Lila: Distancia Horizontal. Cambia el número para movilizar el menú hacia la derecha o la izquierda.

FIN! TAN~ TAN~!! Y que les pareció? Espero que les aya gustado. Cualquier error o corrección sobre el código no duden en decírmelo. WELL! Kuma se va! nos leemos mañana my darlings .

Créditos por código del menú a: X

14 comentarios:

  1. waa kuma mil gracias!!
    tenia la duda de como se hacia...gracias,THAKS!

    ResponderEliminar
  2. Muchas gracias por este lindisimo tuto amiga!! n_n y uyy espero que tus clases de ingles mejoren u_u creeme conozco ese tipo de maestros que solo sirven para calentar los asientos xD, en fin amiga que estes bien un saludo

    ResponderEliminar
  3. esto esta super hermoso! espero aplicarlo en el futuro :)

    ResponderEliminar
  4. Muy buen tuto!! :D Esta muy bueno!! :DDD Muchas gracias!!! :3

    Muchos besos y se me cuida!!

    ResponderEliminar
  5. buen tuto!!!! >u<
    me encanta ese menú ^^
    gracias por compartirlo! ^v^

    besos!!! ^-^

    ResponderEliminar
  6. muy bueno el tutorial, gracias por el ^^ y tienes que ir a clase ¬¬

    ResponderEliminar
    Respuestas
    1. jajaja gracias XD si estoy yendo ..solo falto de vez en cuando ewe

      Eliminar
  7. Me encanto el tutorial!! Esta buenísimo!! :) jajajja a mi luego me pasaba eso con mi profes xD la diferencia es que yo si deje la escuela por un tiempo ._.

    Saludos!! xD

    ResponderEliminar
    Respuestas
    1. :0 ohhh bueno creo andamos en las misma :3 fastia que los profes no se lo tomen en serio -.- ...........AH! que bueno que te gustara el tutorial nwn

      Eliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.