Foros del Web » Creando para Internet » CSS »

Modificacion en menu de tabs

Estas en el tema de Modificacion en menu de tabs en el foro de CSS en Foros del Web. Buenas a todos, resulta que he conseguido el codigo de un menú de tabs pero me gustaría hacerle una pequeña modificación para que cuando haga ...
  #1 (permalink)  
Antiguo 18/01/2010, 17:11
pr0
 
Fecha de Ingreso: marzo-2004
Mensajes: 687
Antigüedad: 13 años, 8 meses
Puntos: 28
Pregunta Modificacion en menu de tabs

Buenas a todos,
resulta que he conseguido el codigo de un menú de tabs pero me gustaría hacerle una pequeña modificación para que cuando haga hover a un tab éste suba unos pixels hacia arriba para resaltarlo como el tab activo.

CSS:
Código CSS:
Ver original
  1. #tabs {
  2.   float:left;
  3.   width:100%;
  4.   font-size:93%;
  5.   font-weight:bold;
  6.   font-family:Verdana, Arial, Helvetica, sans-serif;
  7.   line-height:normal;
  8.   border-bottom: 1px solid gray;
  9. }
  10. #tabs ul {
  11.   margin:0;
  12.   padding:16px 10px 0 400px;
  13.   list-style:none;
  14. }
  15. #tabs li {
  16.   display:inline;
  17.   margin:0;
  18.   padding:0;
  19. }
  20. #tabs a {
  21.   float:left;
  22.   background:url("../imagenes/tableft.gif") no-repeat left top;
  23.   margin:4px;
  24.   padding:0 0 0 5px;
  25.   text-decoration:none;
  26. }
  27. #tabs a span {
  28.   float:left;
  29.   display:block;
  30.   background:url("../imagenes/tabright.gif") no-repeat right top;
  31.   padding:5px 12px 4px 6px;
  32.   color:#ECFFEC;
  33. }
  34. /* Commented Backslash Hack hides rule from IE5-Mac \*/
  35. #tabs a span {float:none;}
  36. /* End IE5-Mac hack */
  37. #tabs .selected a{
  38. background-position: 0 -36px;
  39. top: 0;
  40. }
  41. #tabs .selected a span{
  42. background-position: 100% -36px;
  43. color: black;
  44. top: 0;
  45. }
  46. #tabs a:hover span {
  47.   color:#FFFFFF;
  48. }
  49. #tabs a:hover {
  50.   background-position:0% -36px;
  51. }
  52. #tabs a:hover span {
  53.   background-position:100% -36px;
  54. }
HTML:
Código HTML:
Ver original
  1. <div id="tabs">
  2. <ul>
  3. <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
  4. <li class="selected"><a href="#" title="Link 2"><span>Link 2</span></a></li>
  5. <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
  6. <li><a href="#" title="Link 4"><span>Link 4</span></a></li>
  7. <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
  8. </ul>
  9. </div>
Espero que puedan ayudarme. Gracias por adelantado.
  #2 (permalink)  
Antiguo 19/01/2010, 08:10
Avatar de mleonardom  
Fecha de Ingreso: marzo-2009
Mensajes: 81
Antigüedad: 8 años, 9 meses
Puntos: 5
Respuesta: Modificacion en menu de tabs

No se si te entendi bein, pero podrias provar cambiando las lineas 37 y 41 agregando un hover a los li algo asi:

Código HTML:
#tabs .selected a span,
#tabs li:hover
{
background-position: 100% -36px;
color: black;
top: 0;
}
y:

Código HTML:
#tabs .selected a span,
#tabs li:hover
{
background-position: 100% -36px;
color: black;
top: 0;
}
con esto aplicarias el mismo estilo a los tabs seleccionados y a los li con hover.

Espero que esto te sea de alguna utilidad.
__________________
No hay lugar como 127.0.0.1
  #3 (permalink)  
Antiguo 19/01/2010, 09:20
pr0
 
Fecha de Ingreso: marzo-2004
Mensajes: 687
Antigüedad: 13 años, 8 meses
Puntos: 28
De acuerdo Respuesta: Modificacion en menu de tabs

Gracias por tu respuesta pero no me funciona haciendo el cambio por el codigo que me has facilitado.

Por si acaso no se me habia entendido, quiero conseguir con el codigo que tengo el efecto de levantar los tabs al hacer hover y al estar seleccionado tal como en el siguiente ejemplo:

http://www.dynamicdrive.com/style/cs...orizontal_tabs


Muchas gracias de nuevo.

Etiquetas: modificacion, tabs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:36.