Foros del Web » Creando para Internet » Diseño web »

enlace activo en menu

Estas en el tema de enlace activo en menu en el foro de Diseño web en Foros del Web. Hola. Tengo un problema con el enlace activo en el menu, no logro hacer que aparezca como "seleccionado". Los enlaces tienen una imagen de fondo ...
  #1 (permalink)  
Antiguo 15/07/2008, 06:21
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Pregunta enlace activo en menu

Hola. Tengo un problema con el enlace activo en el menu, no logro hacer que aparezca como "seleccionado".
Los enlaces tienen una imagen de fondo y al pasar por encima con el ratón esa imagen cambia. Necesito que el enlace seleccionado tenga la imagen del mouseover pero no lo consigo de ninguna de las maneras. El codigo que tengo ahora mismo es este:

noticias.php

Código HTML:
<div id="dhtmlgoodies_menu" align="center">
	<ul>
		<li class="activo"><a href="#">Noticias</a></li> 
		<li><a href="historia.php">Historia</a>  
       </ul>
</div> 
y en la hoja de estilos tengo

[CSS]

#dhtmlgoodies_menu{
visibility:hidden;
font-family:"Trebuchet MS";
font-size:10px;
}

#dhtmlgoodies_menu ul{
margin:0px;
padding:0px;
}

#dhtmlgoodies_menu li{
list-style-type:none;
background-image:url(../imagenes/li.jpg);
width:135px;
height:17px;
margin-right:1px;
margin-left:2px;
margin-top:0;
margin-bottom:0;
}

#dhtmlgoodies_menu .currentDepth1over{
background-image:url(../imagenes/hover.jpg);
border:0px;
width:135px;
height:17px;
}

#dhtmlgoodies_menu .currentDepth1over a{
color:#000;
}

/* Hasta aquí todo bien */
/* El problema es que no me coge el "activo" */

#dhtmlgoodies_menu li .activo{
list-style-type:none; /* Sin iconos */
background-image:url(../imagenes/hover.jpg);
width:135px;
height:17px;
margin-right:1px;
margin-left:2px;
margin-top:0;
margin-bottom:0;
}
[/CSS]

¿Qué estoy haciendo mal?
Una ayudita por favor. Gracias
Saludos compadres.
  #2 (permalink)  
Antiguo 15/07/2008, 08:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: enlace activo en menu

Quizá sea que tienes un pequeño error en el #dhtmlgoodies_menu li .activo: te sobra el espacio entre el li y el punto. Debe ser:

#dhtmlgoodies_menu li.activo

Mikel.
  #3 (permalink)  
Antiguo 15/07/2008, 12:55
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: enlace activo en menu

Gracias por la sugerencia pero no es por eso. Lo he probado y sigue igual...
  #4 (permalink)  
Antiguo 15/07/2008, 13:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: enlace activo en menu

¿Estás seguro? Yo cojo tu código, cambio las imagenes por otras mías, arreglo esto

#dhtmlgoodies_menu li.activo{

y quito el visibility:hidden; de #dhtmlgoodies_menu para que se vea el menú, y veo la segunda imagen (la que para tí sería hover.jpg), perfectamente en el primer enlace.

Revísalo bien y si no funciona pon un enlace donde verlo o el código html y css completo para ver dónde está el error.

Mikel.
  #5 (permalink)  
Antiguo 15/07/2008, 17:00
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: enlace activo en menu

Si estoy seguro Mikel. Lo he probado tambien sin el "visibility:hidden" y nada.

Siento no poder poner un enlace, pero el caso es que todavía no la tengo colgada en internet (normalmente no las subo hasta que no están terminadas).

En el código HTML creo que no puede estar el fallo, debe ser en el CSS, y al código que puse antes le faltaban algunos estilos que son estos:

#dhtmlgoodies_menu ul li a{
margin:0px;
padding:0px;
background-position:center;
width:135px;
height:17px;
}

#dhtmlgoodies_menu ul{
border:0px;
padding:0px;
}

#dhtmlgoodies_menu ul.menuBlock1{
border:0px;
width:969px;
background-color:#FFF;
}


#dhtmlgoodies_menu a{
color: #FFF;
text-decoration:none;
}


No se que será pero me trae por la calle de la amargura.

Gracias por la ayuda. Esto se llama solidaridad :)

Saludos.
  #6 (permalink)  
Antiguo 15/07/2008, 17:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: enlace activo en menu

Pues igual está en el javascript que usas para cambiar el fondo que comentabas, porque mira este ejemplo

Es exactamente tu código con dos imágenes mias, sin cambiar nada más que lo del principio del li y el punto.

Mikel.
  #7 (permalink)  
Antiguo 15/07/2008, 17:08
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: enlace activo en menu

Pues no se qué decirte. A mi tu enlace no me hace el cambio al pasar el ratón por encima.
  #8 (permalink)  
Antiguo 15/07/2008, 17:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: enlace activo en menu

No, no, no. Es que en tu código no hay nada que haga el cambio. Decías en tu consulta que:

Cita:
Tengo un problema con el enlace activo en el menu, no logro hacer que aparezca como "seleccionado".
Los enlaces tienen una imagen de fondo y al pasar por encima con el ratón esa imagen cambia. Necesito que el enlace seleccionado tenga la imagen del mouseover pero no lo consigo de ninguna de las maneras.
Y a eso es únicamente a lo que te he respondido, a que en el enlace seleccionado con la clase "activo" te aparezca de fondo la segunda imagen.

Por eso te he dicho lo del javascript, porque decías que al pasar el ratón cambia la imagen de fondo, pero como no veo en tu código nada que pueda hacer eso he imaginado que lo harías con javascript.

Mikel.
  #9 (permalink)  
Antiguo 15/07/2008, 17:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: enlace activo en menu

Para que te haga el cambio debes cambiar algunas cosas, a no ser que efectivamente estés usando javascript. Mira este ejemplo hecho sobre tu código.

Mikel.
  #10 (permalink)  
Antiguo 15/07/2008, 17:29
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: enlace activo en menu

Tienes razón. Debe ser en el javascript. No me había dado cuenta.

Muchas gracias. Seguiré intentándolo y ya te contaré.

Saludos compadre.
  #11 (permalink)  
Antiguo 16/07/2008, 06:10
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: enlace activo en menu

Sigo igual. No consigo solucionarlo. En el código JavaScript hay una parte que hace referencia al enlace seleccionado:

this.className = 'currentDepth' + attr + 'over';

if(activeMenuItem && activeMenuItem!=this){
activeMenuItem.className=activeMenuItem.className. replace(/over/,'');
}
activeMenuItem = this;

Pero yo no ando muy suelto con JavaScript y no se qué puede estar fallando.

Una ayudita no me vendria nada mal. Gracias.

Saludos compadres.
  #12 (permalink)  
Antiguo 16/07/2008, 06:42
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: enlace activo en menu

Esto es increible.

Cuando carga el menú (los enlaces se muestran en vertical) muestra bien el elemento seleccionado, pero después (cuando los coloca en horizontal) cambia y sigue fallando.

Ya no se qué hacer.

¿Alguien sabe donde puede estar el fallo?

Gracias compadres.
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 21:15.