Estaba mirando un tutorial en donde se crea un menu simple en PS. Pero sólo termina ahí en PS, no se como pasarlo a HTML.
Si el menu tiene un item Home con letra blanca, pero al pasar el mouse :hover, el color cambia a negro, supongo que seran 2 imagenes diferentes. Pero la imagen sería del menú en GENERAL! o sólo la parte que cambia?
Alguien me da una pista?
Buenas,
Depende de como tengas el menú se puede hacer de varias formas. De todos modos, la manera mas recomendable siempre es usar sprites de panera que tengas que usar solo 1 imagen para el menú entero.
Te dejo un ejemplo:
Esto es un menú en forma de sprite.
(http://i47.tinypic.com/2u4hphy.png)
http://i47.tinypic.com/2u4hphy.png
Y esto es el código...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento</title>
<style type="text/css">
.menu {list-style:none; padding:0px; margin:0px;}
.menu>li {
float:left;
margin:0px 5px 0px 0px;
background:url("menu_sprite.png") no-repeat;
/* Debemos saber cuanto mide cada "item" */
/* Si no son iguales unos a otros, hay que indicarlo en sus respectivas clases. */
width:86px;
height:38px;
}
.menu>li a {
/* Debemos ocultar el texto del link */
/* Ademas haremos que el <a> ocupe el 100% del item. */
text-indent:-99999px;
width:100%;
height:38px;
color:transparent;
display:block;
}
/* Declaramos por donde empieza la posicion en la imagen */
/* width / height */
.item1 {background-position:-0px -0px !important;}
.item2 {background-position:-89px -0px !important;}
.item3 {background-position:-179px -0px !important;}
/* El hover */
.item1:hover {background-position:-0px -46px !important;}
.item2:hover {background-position:-89px -46px !important;}
.item3:hover {background-position:-179px -46px !important;}
</style>
</head>
<body>
<div id="algo">
<ul class="menu">
<li class="item1"><a href="" title="Incio">Menu 1</a></li>
<li class="item2"><a href="" title="Blog">Menu 1</a></li>
<li class="item3"><a href="" title="Contacto">Menu 1</a></li>
</ul>
</div>
</body>
</html>
El demo lo puedes encontrar aquí: http://jsfiddle.net/SGZzV/
PD: Pues eso, combina las imagenes en 1 y usas sprites =) xD
Saludos
Supongamos que tengo este menu como lo pongo a funcionar en html?
[youtube=425,350]http://www.youtube.com/watch?v=JC2W6BzxMUk[/youtube]