11 ago. 2011

[TUTORIAL] Cómo hacer un menú vertical con imágenes

Alguna vez te has preguntado cómo se hacen esos menús que hay en algunos blogs, donde los botones cambian cuando pasa el cursor por encima??? (como el que está a la derecha) es muy fácil!!! como este




Primero debes ir a DISEÑO, luego a EDICIÓN DE HTML
Cuando estés ahí, busca con CONTROL+F esto; ]]></b:skin> 
Y justo arriba pega esto:


/* Menu nav
----------------------------------------------- */

#nav,#nav li {
margin: 0;
padding: 0;
list-style: none;
}

#nav a {
width: 140px;
height: 27px;
background: url(la imagen del botón que quieras poner) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}

#nav a:hover {
background-position: 0 -27px;
color: #900;
text-decoration: none;
}



Lo que está en rojo es la url de la imagen del botón, esta puede ser de cualquier forma o color, pero siempre del mismo tañamo, y debe estar así: (una parte de como se vería normalmente y la otra es como cambia cuando se pone el cursor encima, como el menúi de mi blog) Por ejemplo:






Ve a Vista previa y fíjate de que no haya nada raro,


Luego vas a diseño -> elementos de página -> añadir un gadget -> HTML javascript y pega lo siguiente:


<ul id="nav">
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
</ul>



es el enlace de la página 


Para cada vez que quieras añadir un boton, solo agrega debajo de la misma lista un <li><a href="#">Título</a></li>


Bueno.. es algo simple y quizá la mayoría lo sepa, pero espero que a más de alguien le sea útil :3


14 comentarios:

  1. Muchas gracias por los códigos! Yo estoy pensando en cambiar el look, a lo mejor pruebo a ver que tal quedan.

    ResponderEliminar
  2. Es muy interesante el tuto,yo ultimamente quiero poner cosas en el blog y no me acepta los códigos será que algo hao mal =/

    ResponderEliminar
  3. AL FIN estaba esperando a k alguien colocara algo a si durante mucho tiempo grax Mary

    ResponderEliminar
  4. Waaa :3 lo voy a intentar en cuanto tenga tiempito o.ó de hecho yo ya empezaba haciendo mi menu de otra forma, lo estaba haciendo en flash, que tambien es muy facil y queda bonito ^-^

    ResponderEliminar
  5. Genial! no tenia idea de como se hacia xD gracias por la tuto n_n saludos que tengas un lindo dia

    ResponderEliminar
  6. me gusto el tutorial pero me quedo una duda como le hago para poner varios enlaces de paginas a un solo boton del menu.

    ResponderEliminar
  7. Oye amiwa muy interesante este tuto eehh me has enseñado algo que no sabia de los menu n_n entonces para que salga con 2ble colocor hay que hacer la imagen asi uno debajo del otro? O.o

    ResponderEliminar
  8. El menu esta muy bueno.. Se que me servirá más adelante. Es que todavía no tengo mucho contenido en el blog.. >_< hehe me encanto el tuto!! ♥ Saluudiitos!

    ResponderEliminar
  9. Hola me encantó el tutorial, hace tiempo ya que estoy epnsando en la idea de poner un menu, de hecho anoche mismo lo tenia pensado. Muchas gracias por crear el tutorial y compartirlo con nosotras. Un beso grande.

    ResponderEliminar
  10. WIIII! Gracias por el aporte ^^ Hace SIGLOS que no me pasaba por tu blog TT

    ResponderEliminar
  11. Hola Marie esta muy interesante la entrada voy a pobrarlo a ver que tal ^^ te pasas?
    http://ohgabyy.blogspot.com/

    ResponderEliminar
  12. Kawaiiii!! Ya mismo lo pongo!! Me sirve de mucho :D besos!!! Tu blog es muy pero muy kawaii y cute! Besos ^^

    ResponderEliminar
  13. perdon por repetir "besos" dos veces jejejje no me di cuenta^^

    ResponderEliminar