Boton que muestre la sección activa con CSS

[plastim]

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

[cristian_cena]

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.

[plastim]

Cristian_cena, muchas gracias por la respuesta, voy a investigar mas sobre javascript para hacerlo

[pann84]

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;
}

[cristian_cena]

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!

[plastim]

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

[cristian_cena]

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.