Foros del Web » Creando para Internet » CSS »

Como crear estado activo en css

Estas en el tema de Como crear estado activo en css en el foro de CSS en Foros del Web. Hola amigos,necesito una ayudita con una barra de menú que he creado con porgramita llamado "css3 menu".Se trata de una barra estilo esta : Cuando ...
  #1 (permalink)  
Antiguo 08/02/2011, 11:02
armandas
Invitado
 
Mensajes: n/a
Puntos:
Como crear estado activo en css

Hola amigos,necesito una ayudita con una barra de menú que he creado con porgramita llamado "css3 menu".Se trata de una barra estilo esta :

Cuando llevamos el cursor del raton encima de una seccion,esta cambia de aspecto.Y si lo quitamos se vuelve al estado normal.
Yo lo que no consigo es que cuando entremos en esta sección,se quede con el estado cambiado,para asi saber en que parte del menu nos encontramos en todo el momento.

Ej:

INICIO SERVICIOS CONTACTO (cuando estemos en INICIO)

INICIO SERVICIOS CONTACTO (cuando estemos en SERVICIOS)

INICIO SERVICIOS CONTACTO (cuando estemos en CONTACTO)

Gracias

aqui el codigo html:
Código HTML:
Ver original
  1. <ul id="css3menu">
  2.     <li><a href="barra.html"title="1">INICIO</a></li>
  3.     <li><a href="barra2.html" title="2">SERVICIOS</a></li>
  4.     <li><a href="barra3.html" title="3">CONTACTO</a></li>
  5. </ul>

AQUI el css:
Código CSS:
Ver original
  1. ul#css3menu,ul#css3menu ul{
  2.     margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
  3. ul#css3menu ul{
  4.     display:none;position:absolute;left:-1px;top:98&#37;;-moz-box-shadow:3.5px 4px 5px #000000;-webkit-box-shadow:3.5px 4px 5px #000000;box-shadow:3.5px 4px 5px #000000;padding:0 10px 10px;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
  5. ul#css3menu li:hover>*{
  6.     display:block;}
  7. ul#css3menu li:hover{
  8.     position:relative;}
  9. ul#css3menu ul ul{
  10.     position:absolute;left:98%;top:-2px;}
  11. ul#css3menu{
  12.     display:block;
  13.     font-size:0;
  14.     position:absolute;
  15.     z-index:1000;
  16.     left:81px;
  17.     top:54px;
  18. }
  19. ul#css3menu li{
  20.     display:block;white-space:nowrap;font-size:0;float:left;}
  21. ul#css3menu>li,ul#css3menu li{
  22.     margin:0;}
  23. ul#css3menu a:active, ul#css3menu a:focus{
  24.     outline-style:none;}
  25. ul#css3menu a{
  26.     display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS,sans-serif;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
  27. ul#css3menu ul li{
  28.     float:none;margin:10px 0 0;}
  29. ul#css3menu ul a{
  30.     text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;font:14px Tahoma,serif;color:#000;text-decoration:none;}
  31. ul#css3menu li:hover>a {
  32.     background-color:#0c97e2;
  33.     border-color:#C0C0C0;
  34.     border-style:solid;
  35.     font:bold 14px Trebuchet MS,sans-serif;
  36.     color:#000000;
  37.     text-decoration:none;
  38.     text-shadow:#FFF 0 0 1px;
  39.     background-image:url("mainbk.png");
  40.     background-position:0 100%;
  41. }
  42.  
  43.  
  44. ul#css3menu img{
  45.     border:none;vertical-align:middle;margin-right:20px;width:16px;height:16px;}
  46. ul#css3menu ul img{
  47.     width:16px;height:16px;}
  48. ul#css3menu img.over{
  49.     display:none;}
  50. ul#css3menu li:hover > a img.def{
  51.     display:none;}
  52. ul#css3menu li:hover > a img.over{
  53.     display:inline;}
  54. ul#css3menu span{
  55.     display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
  56. ul#css3menu ul li:hover>a{
  57.     background-color:#FFFFFF;background-image:none;font:14px Tahoma,serif;color:#0978b3;text-decoration:none;}
  58. linkactivo {
  59.     color: #F00;
  60.     text-decoration: none;
  61.     background-color: #FF0;
  62.     background-image: url(../Pruebas/imagenes/caja.jpg);
  63. }
  64.  
  65.  
  66. ul#css3menu li.topfirst>a{
  67.     border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;}
  68. ul#css3menu li.toplast>a{
  69.     border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0;}

Última edición por armandas; 08/02/2011 a las 11:12
  #2 (permalink)  
Antiguo 08/02/2011, 12:59
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Como crear estado activo en css

Se consigue definiendo un estado ".seleccionado" a nuestro menú.
En cada página de nuestro sitio tendremos seleccionado un elemento u otro de nuestro menú.
Al abrir una página de nuestro sitio a través de un enlace, ésta aparece desde un principio con la opcion seleccionada correctamente.
  #3 (permalink)  
Antiguo 08/02/2011, 14:28
armandas
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Como crear estado activo en css

y como se hace este estado en css,ese es mi problema

luego en html según que pagina y enlace pondria class="selecciónado" etc..
  #4 (permalink)  
Antiguo 08/02/2011, 14:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Como crear estado activo en css

puedes usar variables de sesión para saber en sección estás. en caso que no uses ningún lenguaje del servidor, puedes usar window.name de javascript

Etiquetas: estado
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 12:46.