Foros del Web » Creando para Internet » CSS »

Boton que muestre la sección activa con CSS

Estas en el tema de Boton que muestre la sección activa con CSS en el foro de CSS en Foros del Web. Hola, Con css ha creado menús con anterioridad pero no se como hacer que me muestre en que sección estoy. por ejemplo aqui se ve ...
  #1 (permalink)  
Antiguo 30/07/2010, 17:27
 
Fecha de Ingreso: junio-2010
Ubicación: Medellín
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Boton que muestre la sección activa con CSS

Hola,
Con css ha creado menús con anterioridad pero no se como hacer que me muestre en que sección estoy.
por ejemplo aqui se ve que estamos en el home



y aquí se ve que estoy en la sección El grupo >> Los Técnicos



No se si es con algo como el li a:visited o el li a:hover, algo por el estilo.

Mejor dicho, lo que yo quiero es que si estoy en una sección determinada, el item de menu al que pertenece este de otro color.

Pdt: la pagina de donde saque las imagenes es esta
http://www.teatrotespys.com/
Agradezco la ayuda que me puedan brindar

Última edición por plastim; 02/08/2010 a las 02:47
  #2 (permalink)  
Antiguo 30/07/2010, 18:17
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Boton que muestre la sección activa con CSS

Hola plastim, mira, al pasar de una a otra página html lo que ocurre es que se pide otro documento al servidor, por lo tanto el efecto se pierde digamos. Lo que se hace en estos casos es trabajar con javascript, o mejor aún ajax. Si no trabajas con javascript puedes hacer lo siguiente, eso si, da un poco mas de trabajo.

Supongamos que tienes un menu de 3 items, entonces:
- Crea una página html por cada ítem de menú que tengas (o sea 3 paginas) y luego copia en cada pagina el mismo menú.
- Luego crea una clase (.miclase{estilos}) y en la página1 se la aplicas al item1. En la pagina2 al item2 y en la pagina 3 al item 3.

si por ejemplo tu item es un <li> entonces te quedaría: <li class="mi_clase">

Espero te sirva, cualquier cosa aca estamos, un abrazo.
  #3 (permalink)  
Antiguo 02/08/2010, 10:42
 
Fecha de Ingreso: junio-2010
Ubicación: Medellín
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Boton que muestre la sección activa con CSS

Cristian_cena, muchas gracias por la respuesta, voy a investigar mas sobre javascript para hacerlo
  #4 (permalink)  
Antiguo 02/08/2010, 10:56
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Boton que muestre la sección activa con CSS

yo de javascript no se mucho la verdad, pero si lo que quieres es que el link de dónde estás, se muestre con un estilo diferente, prueba a crear una clase nueva, y en la web que corresponda, aplícasela a dicho link, como excepción. Algo así:

Código:
EL MENÚ (X)HTML
<div class="naviUp">
          <ul class="mainNavi">
            <li><a href="trabajaconnos.html">Trabaja con nosotros</a></li>
            <li><a href="noticias.html">Noticias</a></li>
            <li><a href="inscripcion.html">Inscripci&oacute;n</a></li>
            <li class="activo"><a href="cursos.html">Cursos</a></li>
            <li><a href="centro.html">Centro de formaci&oacute;n</a></li>
          </ul>
        </div>

AQUÍ UN CSS QUE MODIFICARÍA LA APARIENCIA DE LA CLASE 'ACTIVO', esto deberás ponerlo en la página que corresponda, no se va generando solo como puede ser que lo haga JS pero ya te digo que yo JS no se mucho

.mainNavi li.activo a {
    	color: #eca026;
}
  #5 (permalink)  
Antiguo 02/08/2010, 16:38
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Boton que muestre la sección activa con CSS

Hola plastim, mira, en este articulo podrás aprender a cargar html con javascript (ajax) logrando que tu index no se refresque.

A lo mejor leer este hilo te sea de utilidad.

Saludos!
  #6 (permalink)  
Antiguo 03/08/2010, 00:27
 
Fecha de Ingreso: junio-2010
Ubicación: Medellín
Mensajes: 12
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Boton que muestre la sección activa con CSS

Muchas gracias por sus respuestas, pann, la verdad es que el menú (lista) va en una plantilla donde se carga todo el contenido, pero me han dado una idea de hacerlo con php y una variable en la url que me indique cual es el boton que debo tener como activo, es una opción.
Cristian, esta muy bueno el enlace, lo voy a analizar a ver como me va y luego comento
  #7 (permalink)  
Antiguo 03/08/2010, 00:37
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Boton que muestre la sección activa con CSS

Hola plastim, mira, yo no lo haría con php (hablo del efecto "activo"), porque por mas includes que utilices no podrás evitar que el index se refresque (digamos, pasar de una pagina a otra es inevitable), al menos el único modo que encontré de que no se refresque el documento es usando javascript, eso sí, si hallas otra forma me avisas XD Un saludo.

Etiquetas: Ninguno
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 16:55.