Menu cambio fondo

[codek_orz]

Hola buenas a todos, quiero conseguir el efecto que tiene la siguiente web:
http://www.4templates.com/help/frequ...ked-questions/

Que cuando pinchas en cualquier botón del mundo este cambia y se queda fijo con otro color de fondo, como haciendo que se vea en que sección estas.

No consigo hacerlo, busque por ahí y no encuentro como se llama ese efecto, conozco el hoover y eso, pero no es eso lo que quiero.

El efecto lo quiero en mi web www.liberartumovilenalicante.com
en el menu que cuando pinche una sección el bvotón se quede fijo con el fondo azul. Y que por defecto al entrar en la web se marque el botón de inicio.

Espero haberme explicado y que puedan ayudarme, un saludo y gracias!

[hdennison]

No es una propiedad CSS en si, tendrás que declarar una clase "activo" y aplicarsela al botón cuando sea necesario.

Es decir, en la home tu menú será algo asi:

<li class="activo"><a href="#">Home</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Contactar</a></li>

y en contactar sería:

<li><a href="#">Home</a></li>
<li><a href="#">Sección 2</a></li>
<li class="activo"><a href="#">Contactar</a></li>



Otra cosa que puedes hacer es ponerle una clase especifica a cada li, y cambiarle la clase al html o body, según la sección donde estás... si te interesa está opción ya la comento con calma ;)

[DrFaust]

En cada uno de los archivos PHP de tu sitio, modificá la parte donde dice, por ejemplo:

Código:

<a href="index.php" onmouseover="document.inicio.src='images/inicio_b.jpg';" onclick="document.inicio.src='images/inicio_b.jpg';" onmouseout="document.inicio.src='images/inicio_a.jpg';"> 
<img src="images/inicio_a.jpg" border="0" alt="inicio" name="inicio"> 
</a>

Para que te quede así:

Código:

<a href="index.php"> 
<img src="images/inicio_b.jpg" border="0" alt="inicio" name="inicio"> 
</a>

Lo que hace eso es eliminar el efecto hover y reemplazar la imagen del botón inactivo por la del botón activo.

[codek_orz]

Si pero la web dividida, un cabecera.php que luego incluyo. No se si me explico. Donde incluye la cabecera y el menu, y eso lo incluyo en cada archivo php por eso no puedo cambiarlo de esa manera.

[DrFaust]

Entiendo el problema.

En ese caso, sencillamente agregá un bloque IF a cada botón del menú. Un ejemplo, para el botón INICIO:

Código:

if ($seccion == "index.php") {
  // Botón resaltado y sin hover
}
else {
  // Botón con hover
}

Es posible que tu cabecera no sepa en qué página estás actualmente. Podés obtener la URL de la página actual con la siguiente función:

Código:

function curPageName() {
  return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}

Una cosa más: la botonera que estás usando, utilizando una imagen para cada botón, es completamente innecesaria. Podrías lograr exactamente lo mismo con estilos CSS, y tu sitio cargaría mucho más rápido.

[codek_orz]

Iniciado por DrFaust

Entiendo el problema.

En ese caso, sencillamente agregá un bloque IF a cada botón del menú. Un ejemplo, para el botón INICIO:

Código:

if ($seccion == "index.php") {
  // Botón resaltado y sin hover
}
else {
  // Botón con hover
}

Es posible que tu cabecera no sepa en qué página estás actualmente. Podés obtener la URL de la página actual con la siguiente función:

Código:

function curPageName() {
  return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}

Una cosa más: la botonera que estás usando, utilizando una imagen para cada botón, es completamente innecesaria. Podrías lograr exactamente lo mismo con estilos CSS, y tu sitio cargaría mucho más rápido.

Es posible lograr esos botones desde CSS, pero lo he intentado y no doy, además los quiero con sombra ... pero solo he visto que los efectos sombra de CSS solo sirven para firefox (creo) ¿me puedes orientar como hacerlo?
¿pequeño tuto?