Menu en PhotoShop

Shell Root · 28 Diciembre 2012, 05:24 AM

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?

#!drvy · 28 Diciembre 2012, 17:37 PM

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

Y esto es el código...

Código (css) [Seleccionar]

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

Shell Root · 30 Diciembre 2012, 00:15 AM

Supongamos que tengo este menu como lo pongo a funcionar en html?
[youtube=425,350]http://www.youtube.com/watch?v=JC2W6BzxMUk[/youtube]

Test Foro de elhacker.net SMF 2.1

Menu en PhotoShop

Shell Root

#!drvy

Shell Root