Foros del Web » Programando para Internet » Javascript »

Problema con menu

Estas en el tema de Problema con menu en el foro de Javascript en Foros del Web. Hola señores tengo problemas con un menu que estoy creando. Es de lo mas sencillo y he llegado casi hasta el final. Les comento el ...
  #1 (permalink)  
Antiguo 13/06/2012, 16:37
 
Fecha de Ingreso: junio-2012
Mensajes: 3
Antigüedad: 11 años, 10 meses
Puntos: 0
Problema con menu

Hola señores tengo problemas con un menu que estoy creando.
Es de lo mas sencillo y he llegado casi hasta el final.
Les comento el problema que tengo. Es un menu con 4 enlaces, lo que he conseguido hasta el momento es que al pasar por encima el cursor cambie de color y que al seleccionar dicho enlace se marque como que estas en él. Pero no consigo como puedo ir a dicho enlace. Se queda marcado siempre el que pinchas, pero el enlace de la barra de direcciones no cambia siempre se mantiene el mismo.

Aquí os dejo el codigo.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Estados de btn</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.cp_btns").click(function() {
$("a.cp_btns.active").removeClass("active");
$(this).addClass("active");
});
});
</script>

<style type="text/css">
body{
background:#666;
}
#cp_menu{
width:960px;
font:Tahoma;
font:bold;
text-align:center;
margin:auto;
padding-top:auto;
}
#cp_menu a{
border:1px solid #666;
padding-top:3px;
padding-bottom:1px;
padding-left:3px;
padding-right:3px;
text-decoration:none;
}
#cp_menu a:hover{
color:#F90;
}
a.cp_btns{
color:#333;
}
a.cp_btns.active{
color:#F90;
}
</style>
</head>

<body>
<div id="cp_menu">
<a class="cp_btns active" href="index.html" onclick="return false">Home</a>
<a class="cp_btns" href="portafolio.html" onclick="return false">Portafolio</a>
<a class="cp_btns" href="blog.html" onclick="return false">Blog</a>
<a class="cp_btns" href="contact.html" onclick="return false">Contact</a>
</div>
</body>
</html>


Espero que me puedan echar una ayudita.
Muchas gracias adelantadas.
Un saludo.
  #2 (permalink)  
Antiguo 13/06/2012, 16:41
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 11 años, 10 meses
Puntos: 127
Respuesta: Problema con menu

Cita:
Iniciado por aorasio Ver Mensaje
Hola señores tengo problemas con un menu que estoy creando.
Es de lo mas sencillo y he llegado casi hasta el final.
Les comento el problema que tengo. Es un menu con 4 enlaces, lo que he conseguido hasta el momento es que al pasar por encima el cursor cambie de color y que al seleccionar dicho enlace se marque como que estas en él. Pero no consigo como puedo ir a dicho enlace. Se queda marcado siempre el que pinchas, pero el enlace de la barra de direcciones no cambia siempre se mantiene el mismo.

Aquí os dejo el codigo.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Estados de btn</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.cp_btns").click(function() {
$("a.cp_btns.active").removeClass("active");
$(this).addClass("active");
});
});
</script>

<style type="text/css">
body{
background:#666;
}
#cp_menu{
width:960px;
font:Tahoma;
font:bold;
text-align:center;
margin:auto;
padding-top:auto;
}
#cp_menu a{
border:1px solid #666;
padding-top:3px;
padding-bottom:1px;
padding-left:3px;
padding-right:3px;
text-decoration:none;
}
#cp_menu a:hover{
color:#F90;
}
a.cp_btns{
color:#333;
}
a.cp_btns.active{
color:#F90;
}
</style>
</head>

<body>
<div id="cp_menu">
<a class="cp_btns active" href="index.html" onclick="return false">Home</a>
<a class="cp_btns" href="portafolio.html" onclick="return false">Portafolio</a>
<a class="cp_btns" href="blog.html" onclick="return false">Blog</a>
<a class="cp_btns" href="contact.html" onclick="return false">Contact</a>
</div>
</body>
</html>


Espero que me puedan echar una ayudita.
Muchas gracias adelantadas.
Un saludo.
Lo estás bloqueando tú mismo por poner

onclick="return false"

el return false evita que se produzca la acción por defecto del navegador, que en este caso es ir hacia dicha dirección.

Quítalo y debería irte.
  #3 (permalink)  
Antiguo 13/06/2012, 17:28
 
Fecha de Ingreso: junio-2012
Mensajes: 3
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Problema con menu

dontexplain gracias por la respuesta. He probado lo que me comentas y funciona, pero se queda todo el rato bloqueado el enlace home y pierdo el que se marquen el resto de enlaces. La única acción que aguanta es la de a:hover
Un saludo.
  #4 (permalink)  
Antiguo 13/06/2012, 18:44
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: Problema con menu

yo le voy mas a que el problema es que cambia de pagina y al recargar se pierde el efecto que hace el javascript...

lo ideal es que pongas en cada pagina manualmente la case active al link que le corresponda, tambien puedes crear otro script (javascript, php, asp, etc.) que detecte la URL y marque el link que corresponda
  #5 (permalink)  
Antiguo 17/06/2012, 12:49
 
Fecha de Ingreso: junio-2012
Mensajes: 3
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Problema con menu

Hola a todo el mundo he encontrado el tutorial del que hice el efecto del menu. Si lo pueden echar un vistazo y decirme como puedo arreglar el problema, de porque cuando cambias de url no la activa.
TUTORIAL http://www.youtube.com/watch?v=_KJc-v6oAfo
Un saludo.
  #6 (permalink)  
Antiguo 17/06/2012, 13:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: Problema con menu

tu problema es lo que dije anteriormente al dar clic cambias de pagina, en el ejemplo que muestras del vídeo es para cargar contenido sin cambiar de pagina, similar a este:
-> clic aquí

puedes ver el código para entender como funciona, si quieres mantenerlo como tienes lo que debes hacer es en cada pagina aplicar una clase distinta al elemento del menú que corresponda

Etiquetas: html, jquery, js
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 13:55.