css sprite menu vertical

[walterfcr]

buenas!

he estado traveseando esa tecnica del css sprite y me parece genial para hacer menus pero solo puedo hacerlos horizontales.

si alguno sabe como hacerlos vertical o que me recomienden algun tutorial se los agradezco

[Ruben_JD]

Hola, simplemente juega con los valores de background-position: (+- ##px) (+- ##px); colocando valores positivos o negativos.
para mas info visita web o tambien en webounts o webonuts y mejor aun en google

Suerte.

[Kurozaki]

Horizontal ?? Acerlo vertical ??
Que diferencia hay, el efecto sera el mismo.

En ves de estar en top y al hacer hover pase a bottom
Usa left y al hacer hover que pase a right

O con valores en px.

Hay muchas maneras, pero creo que el resultado sera el mismo. O al menos esto es lo que entiendo cuando dices que hacerlo vertical.

[Ruben_JD]

Tu menu tiene la siguiente estructura:

Código HTML:

<ul id="menu">
  <li><a href="#">opcion 1</a></li>
  <li><a href="#">opcion 2</a></li>
  <li><a href="#">opcion 3</a></li>
</ul>
 

el codigo css:

Código CSS:

ul#menu{
  widht: 150px;/* ancho*/
}
ul#menu li{
  float:left;
  display:block;/* inline es horizontal*/
  padding:0;
  margin:0;
}
ul#menu li a{
  display:block;
  text-decoration: none;
}
ul#menu li a:hover{
  display:block;
  text-decoration: underline;
}
 

ahora solo tienes que añadir el codigo a cada boton con su respectiva posicion para el sprite.

Código HTML:

<ul id="menu">
  <li><a href="#" class="op1">opcion 1</a></li>
  <li><a href="#" class="op2">opcion 2</a></li>
  <li><a href="#" class="op3">opcion 3</a></li>
</ul>
 

Código CSS:

ul#menu{
  widht: 150px;/* ancho*/
}
ul#menu li{
  float:left;
  display:block;/* inline es horizontal*/
  padding:0;
  margin:0;
}
ul#menu li a{
  display:block;
  text-decoration: none;
background-image: (tuimagen);
}
ul#menu li a.op1{
width: px; /*ancho de la imagen*/
background-position: 0 0; /*posicion x & y*/
}
ul#menu li a.op1:hover{
  display:block;
  text-decoration: underline;
}
ul#menu li a.op2{
...
cuantas opcines tengas
 

pruebalo, suerte.

[walterfcr]

Iniciado por Kurozaki

Horizontal ?? Acerlo vertical ??
Que diferencia hay, el efecto sera el mismo.

En ves de estar en top y al hacer hover pase a bottom
Usa left y al hacer hover que pase a right

O con valores en px.

Hay muchas maneras, pero creo que el resultado sera el mismo. O al menos esto es lo que entiendo cuando dices que hacerlo vertical.

tenias razon! lo estudie con bastante calma y tan simple como usar valores en px
gracias a los 2 por responder