Foros del Web » Creando para Internet » CSS »

Menu CSS link activo

Estas en el tema de Menu CSS link activo en el foro de CSS en Foros del Web. Hola a todos se que se ha hablado bastante sobre esto, pero no encuentro justo la solución que necesito. Lo que quiero lograr es que ...
  #1 (permalink)  
Antiguo 23/03/2012, 22:03
 
Fecha de Ingreso: noviembre-2008
Ubicación: el sol
Mensajes: 146
Antigüedad: 16 años
Puntos: 6
Menu CSS link activo

Hola a todos se que se ha hablado bastante sobre esto, pero no encuentro justo la solución que necesito.

Lo que quiero lograr es que tras pulsar un botón de mi menú este se le asigne una propiedad CSS específica para que resalte para saber en la sección que te encuentras. Algo muy típico...

El problema es que todo lo que leí tiene en cuenta que tienes todo en una misma página, teniendo en cuenta que trabajo con PHP y tengo una cabecera donde tengo el header y el menu, y esta se incluye en los distintos cuerpos no puedo hacerlo de la manera que plantean... ¿Alguien podría explicarme como puedo hacer?

Un saludo y gracias, espero haberme explicado a estas horas de la mañana...

pd: si quereis ver la web es www.liberartumovilenalicante.com, lo que quiero básicamente es que al pulsar sobre un enlace de menu se quede con el efecto del hover. Gracias
  #2 (permalink)  
Antiguo 23/03/2012, 23:36
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Menu CSS link activo

Hola
Bueno, en realidad de css será poco y nada.
Yo hice esto, que no sé que tan bueno puede ser pero funciona:
Antes de incluir la cabecera (igual que lo tuyo: header+menu), declaro la variable de sesión según la página en la cual me encuentro
Por ejemplo en inicio.php:
Código PHP:
Ver original
  1. $_SESSION[MENU]= 1;//para Boton Activo de menu
  2. include('encabezado.php');

Y en encabezado.php
Código PHP:
Ver original
  1. <ul>
  2.                     <li class="nivel1 <? if($_SESSION[MENU]==1){ echo"activo";}?>"><a href="index.php">Inicio</a></li>
  3.                    
  4.                     <li class="nivel1 <? if($_SESSION[MENU]==2){ echo"activo";}?>"><a href="nosotros.php">Nosotros</a></li>

En el .css defino el estilo que quiero para cuando está activo.
Se podría hacer rescatando la url mediante php con algo como esto $_SERVER["REQUEST_URI"].

Investiga, y seguramente encontraras alguna clase o script ya armado.
Solo te queda rezarle a San Google.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 24/03/2012, 10:45
 
Fecha de Ingreso: noviembre-2008
Ubicación: el sol
Mensajes: 146
Antigüedad: 16 años
Puntos: 6
Respuesta: Menu CSS link activo

Cita:
Iniciado por C2am Ver Mensaje
Hola
Bueno, en realidad de css será poco y nada.
Yo hice esto, que no sé que tan bueno puede ser pero funciona:
Antes de incluir la cabecera (igual que lo tuyo: header+menu), declaro la variable de sesión según la página en la cual me encuentro
Por ejemplo en inicio.php:
Código PHP:
Ver original
  1. $_SESSION[MENU]= 1;//para Boton Activo de menu
  2. include('encabezado.php');

Y en encabezado.php
Código PHP:
Ver original
  1. <ul>
  2.                     <li class="nivel1 <? if($_SESSION[MENU]==1){ echo"activo";}?>"><a href="index.php">Inicio</a></li>
  3.                    
  4.                     <li class="nivel1 <? if($_SESSION[MENU]==2){ echo"activo";}?>"><a href="nosotros.php">Nosotros</a></li>

En el .css defino el estilo que quiero para cuando está activo.
Se podría hacer rescatando la url mediante php con algo como esto $_SERVER["REQUEST_URI"].

Investiga, y seguramente encontraras alguna clase o script ya armado.
Solo te queda rezarle a San Google.
Saludos
Muchas gracias, pense en hacerlo así pero creí que habría otra manera sin recurrir a php, pero como veo no. Entonces manso a la obra.

Muchisismas gracias saludos
  #4 (permalink)  
Antiguo 24/03/2012, 13:09
 
Fecha de Ingreso: noviembre-2008
Ubicación: el sol
Mensajes: 146
Antigüedad: 16 años
Puntos: 6
Respuesta: Menu CSS link activo

Lo he hecho de esa manera pero tengo un problema que hasta que no recargo la página no se marca... no se como solucionarlo :( he incluido en cada cuerpo de la página lo siguiente...

Para el index (INICIO)

Código PHP:
<?php $_SESSION["cat"] = 1?>
y luego en el botón
Código PHP:
<li><a href="index.php" class="boton" <? if($_SESSION["cat"]==1){ echo 'id="activo"';}?>>INICIO</a></li>
y el css... no hay mucho misterio
[CSS]
a#activo {
background-image: linear-gradient(bottom, #333 20%, #666 58%);
background-image: -o-linear-gradient(bottom, #333 20%, #666 58%);
background-image: -moz-linear-gradient(bottom, #333 20%, #666 58%);
background-image: -webkit-linear-gradient(bottom, #333 20%, #666 58%);
background-image: -ms-linear-gradient(bottom, #333 20%, #666 58%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.20, #333),
color-stop(0.58, #666)
);
-pie-background: linear-gradient(#333 20%, #666 58%);
behavior: url(PIE.php);
text-decoration: underline;
color: #ffffff;
}[/CSS]

Pero el problema es que si no recargo la página no se selecciona, y si por ejemplo le doy a inicio no se marca nada, pero si cambio a otra categoría como noticias se marca siempre la sección pulsada anteriormente...
  #5 (permalink)  
Antiguo 24/03/2012, 16:02
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Menu CSS link activo

Eso pasa porque php actúa del lado del servidor. Para que actúe del lado del cliente deberías usar javascript.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 25/03/2012, 09:50
 
Fecha de Ingreso: noviembre-2008
Ubicación: el sol
Mensajes: 146
Antigüedad: 16 años
Puntos: 6
Respuesta: Menu CSS link activo

Cita:
Iniciado por C2am Ver Mensaje
Eso pasa porque php actúa del lado del servidor. Para que actúe del lado del cliente deberías usar javascript.
Podrias orientarme? pasarme un ejemplo o un tutorial? o por que busco ? esque esstube googleando y no veo lo que me interesa y es raro ya que es algo muy común

Saludos

EDIT:

Debido a que el problema estaba que cuando declaraba la variable de session en el cuerpo la cabecera no se actualizaba por lo tanto no cojia el link... Solución en la cabecera =)
Código PHP:
if($_SERVER["SCRIPT_NAME"] == "/pagina"){ $_SESSION["cat"] = 1; } 
Saludos

Última edición por codek_orz; 25/03/2012 a las 10:11

Etiquetas: activo, hover, link
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 18:43.