Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Shell Root en 28 Diciembre 2012, 05:24 am


Título: Menu en PhotoShop
Publicado por: Shell Root en 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?

Título: Re: Menu en PhotoShop
Publicado por: #!drvy en 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)
http://i47.tinypic.com/2u4hphy.png

Y esto es el código...

Código
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Documento</title>
  6. <style type="text/css">
  7.    .menu {list-style:none; padding:0px; margin:0px;}
  8.    .menu>li {
  9.       float:left;
  10.       margin:0px 5px 0px 0px;
  11.       background:url("menu_sprite.png") no-repeat;
  12.       /* Debemos saber cuanto mide cada "item" */
  13.       /* Si no son iguales unos a otros, hay que indicarlo en sus respectivas clases. */
  14.       width:86px;
  15.       height:38px;
  16.    }
  17.  
  18.    .menu>li a {
  19.       /* Debemos ocultar el texto del link */
  20.       /* Ademas haremos que el <a> ocupe el 100% del item. */
  21.       text-indent:-99999px;
  22.       width:100%;
  23.       height:38px;
  24.       color:transparent;
  25.       display:block;
  26.    }
  27.  
  28.    /* Declaramos por donde empieza la posicion en la imagen */
  29.    /* width / height */
  30.    .item1 {background-position:-0px -0px !important;}
  31.    .item2 {background-position:-89px -0px !important;}
  32.    .item3 {background-position:-179px -0px !important;}
  33.    /* El hover */
  34.    .item1:hover {background-position:-0px -46px !important;}
  35.    .item2:hover {background-position:-89px -46px !important;}
  36.    .item3:hover {background-position:-179px -46px !important;}
  37. </style>
  38. </head>
  39.  
  40. <body>
  41.    <div id="algo">
  42.       <ul class="menu">
  43.          <li class="item1"><a href="" title="Incio">Menu 1</a></li>
  44.          <li class="item2"><a href="" title="Blog">Menu 1</a></li>
  45.          <li class="item3"><a href="" title="Contacto">Menu 1</a></li>
  46.       </ul>
  47.    </div>
  48. </body>
  49. </html>

El demo lo puedes encontrar aquí: http://jsfiddle.net/SGZzV/

PD: Pues eso, combina las imagenes en 1 y usas sprites =) xD

Saludos

Título: Re: Menu en PhotoShop
Publicado por: Shell Root en 30 Diciembre 2012, 00:15 am
Supongamos que tengo este menu como lo pongo a funcionar en html?
JC2W6BzxMUk


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines