29/11/13

[Tutorial]Menu Topy Love



Holaaaaya es viernes y la verdad que lo siento por no haber estado por sus blogs masse me acumulan y no puedo entrar a todos todos los díaspero para compensaros os traigo este tutorial que me encanta es mi menú favorito




  • Plantilla
  • Edicion HTLM
  • Buscar: </body>
Y pegar antes de </body> este código :3

<style>
.MENUlove { /* BORDE TOP */
font-family: arial;
font-size: 11px;
text-transform: uppercase;
padding: 10px;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
overflow: hidden;
text-align: center;
border-top: 5px solid #fdeb58;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
.MENUlove:hover { /* BORDE TOP HOVER */
border-top: 5px solid #be86f9;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.MENUlove a { /* LINKS */
background: #be86f9;
border-radius: 0 0 30px 30px;
color: #fff;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0px -100px 1px #FFF;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
.MENUlove a:hover { /* LINKS HOVER */
background: #fdeb58;
color: transparent;
font-style: italic;
padding-left: 20px;
padding-right: 80px;
text-shadow: 30px 0px 0px #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
</style>
<div class='MENUlove'>
<a href='URL'>TITULO</a>
<a href='URL'>TITULO</a>
<a href='URL'>TITULO</a>
<a href='URL'>TITULO</a>
</div>
Todo lo que necesitáis saber para cambiar el color viene indicado en mayúsculas al empezar el párrafo
  1. Si quieres añadir mas categorías solo añade esto debajo de la ultima categoría que pusiste
<a href='URL'>TITULO</a>
Espero que este tuto os haya gustado y sobre todo os haya servido de ayuda ya que mucha gente me pidió este tuto aquí esta y la siguiente entrada intentare que sean unos TIPS si tenéis ideas yo las miro jajaja es que para los TIPS es muy difícil tener ideas
Créditos {Mell}

17 comentarios:

  1. aaw gracias ^^ º8º se le quiereee *-*

    ResponderEliminar
  2. se recontra agradece el tuto justo estaba buscando como se hacia ese menu XD

    ResponderEliminar
  3. que chuloooooooo justo andaba buscando un menú quizás lo use! Graciassssssssssss :D

    ResponderEliminar
  4. hola mil gracias por el tuto que te pedi estoy muyu agrecida me cumpliste ese sueno que busque por mucho tiempo de lo agradezco mil linda, lo que necesites estoy presente y claro te dare tus creditos muchas gracias cuidate mucho bye xoxo

    ResponderEliminar
  5. un menu muy lindo un ungran tutorial :D

    ResponderEliminar
  6. Hola kumy aqui esta mi duda, la cual me pediste captura de pantalla: te dejo el link de la imagen http://oi42.tinypic.com/2i0dfuq.jpg

    Espero entiendas :3

    ResponderEliminar
    Respuestas
    1. Si ya me quedo claro todo hay algunas cosas que te puedo poner el link del tutorial que ya hice :3

      1ºLa separación:
      Esa separacion me venia ya sola es decir que al hacer el menu principal y el secundario pues se quedo asi solito xd
      2ºEl gadget de welcome y la cabecera hice esto para que que me quedara abajo
      http://clasicylove.blogspot.com.es/2013/05/tutorialcomo-poner-la-cabecera-la.html

      3ºEl render de cabecera lo pondré pronto en un pack de renders n-n

      eso es todo espero que te sirva

      Eliminar
  7. Oye me encata el tuto y lo quiero agregar pero cuando lo doy a edicion html y busco el codigo html no me aparece

    ResponderEliminar
  8. Guao Grasias me encanta Yo lo ise en mi blog y me encanto como quedo :D

    ResponderEliminar
  9. Como le pongo entradas a el menu ?

    ResponderEliminar
    Respuestas
    1. Pues te vas a la url o enlace de la entrada & lo pegas donde indica en el código del menu

      Eliminar
  10. Nossa adoro seus tutoriais ! Me ajudam muitoooo!

    ResponderEliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com