Foros del Web » Programando para Internet » Jquery »

Problemas con un menu

Estas en el tema de Problemas con un menu en el foro de Jquery en Foros del Web. Buenos dias Antes de nada deciros que soy principiante en esto. Estoy haciendo un menu responsive siguiendo un tutorial que he visto por internet, exactamente ...
  #1 (permalink)  
Antiguo 25/11/2015, 05:32
 
Fecha de Ingreso: enero-2015
Mensajes: 26
Antigüedad: 9 años, 3 meses
Puntos: 0
Problemas con un menu

Buenos dias

Antes de nada deciros que soy principiante en esto. Estoy haciendo un menu responsive siguiendo un tutorial que he visto por internet, exactamente el de falcon master.

Esto seria lo que he hecho:
$(document).ready(main);

var contador =1;

function main(){
$('#menu_resp').click(function(){
//$('#menu').toggle();

if(contador == 1){
$('#menu').animate({right: '0px'}, "slow");
contador = 0;
} else {
contador =1;
$('#menu').animate({right: '-350px'}, "slow");

}

});

Al hacer un click el menu me aperece, todo perfecto hasta aqui.

Al hacer el segundo clic para que el menu se cierre, no pasa nada, no hace caso y es mas, el icono del menu al colocarme encima no aparece el dedo, tampoco hace nada al clickear.

Y por ultimo, cuando se abre el menu y le pincho para que vaya a x sitio, me traslada al sitio pero el menu sigue abierto.

Que estoy haciendo mal? os agradeceria que me echarais una mano.

Mil gracias

Marina
  #2 (permalink)  
Antiguo 25/11/2015, 19:59
 
Fecha de Ingreso: septiembre-2015
Mensajes: 7
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problemas con un menu

Hola,

Con document.ready me imagino que quieres que el menú vaya oculto desde un principio, pero esto no sirve porque la animación sólo se ejecuta con el clic. Ocúltalo directamente con la propiedad RIGHT -- css...

Reescribiendo el código (sin la función MAIN):


Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.   var contador = 0;
  3.  
  4.   $('#menu_resp').click(function(){
  5.     if(contador == 1){
  6.       $('#menu').animate({right: '0px'}, 'slow');
  7.       contador = 0;
  8.     }
  9.     else {
  10.       $('#menu').animate({right: '-350px'}, 'slow');
  11.       contador = 1;
  12.     }
  13.   });
  14. });

Nota: si "#menu" ya está oculto con css, variable CONTADOR se inicia en 1;de lo contrario en zero.

Última edición por henovec; 25/11/2015 a las 20:39
  #3 (permalink)  
Antiguo 26/11/2015, 15:19
 
Fecha de Ingreso: enero-2015
Mensajes: 26
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Problemas con un menu

Gracias por la correccion, ahora se abre y se cierra el menu perfectamente. El tema es que sigue el otro problema, es decir, se abre el menu, pincho en una opcion, se desplaza hasta la zona pero el menu sigue abierto.
No se como arreglar eso

ALguna pista?

gracias

Marina

Cita:
Iniciado por henovec Ver Mensaje
Hola,

Con document.ready me imagino que quieres que el menú vaya oculto desde un principio, pero esto no sirve porque la animación sólo se ejecuta con el clic. Ocúltalo directamente con la propiedad RIGHT -- css...

Reescribiendo el código (sin la función MAIN):


Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.   var contador = 0;
  3.  
  4.   $('#menu_resp').click(function(){
  5.     if(contador == 1){
  6.       $('#menu').animate({right: '0px'}, 'slow');
  7.       contador = 0;
  8.     }
  9.     else {
  10.       $('#menu').animate({right: '-350px'}, 'slow');
  11.       contador = 1;
  12.     }
  13.   });
  14. });

Nota: si "#menu" ya está oculto con css, variable CONTADOR se inicia en 1;de lo contrario en zero.
  #4 (permalink)  
Antiguo 26/11/2015, 19:42
 
Fecha de Ingreso: septiembre-2015
Mensajes: 7
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problemas con un menu

Hola,

Eso mismo, al pinchar en una opción te lleva a otra página (enlace); como te mencioné, usa la propiedad " right" de css para que el menú siempre vaya oculto de inicio, algo así:

Código CSS:
Ver original
  1. #menu{
  2.   right: -350px;
  3. }

o directamente en la misma etiqueta:

Código:
<div id="menu" style="right: -350"> ... opciones ... </div>
* Y recuerda iniciar variable "contador" en uno (var contador = 1)...

Salu2!

Última edición por henovec; 27/11/2015 a las 00:22
  #5 (permalink)  
Antiguo 27/11/2015, 09:51
 
Fecha de Ingreso: enero-2015
Mensajes: 26
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Problemas con un menu

Empieza con 1 y tambien lo tengo en right 😞
  #6 (permalink)  
Antiguo 27/11/2015, 12:24
 
Fecha de Ingreso: septiembre-2015
Mensajes: 7
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problemas con un menu

Hola,

Eso 'tá raro... Intenta agregar "!important", a la propiedad right, si no funca pues si puedes dejarme el css completo del #menu o la página donde tratas de hacer eso... sI funca, pues a otra cosa

Código:
#menu{
  right: -350px !important;
}
  #7 (permalink)  
Antiguo 29/11/2015, 12:46
 
Fecha de Ingreso: enero-2015
Mensajes: 26
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Problemas con un menu

El tema es, que el problema lo tengo para pantallas pequeñas digamos. te pongo en CSS y el menu.

Te pongo el CSS completo del menu.

#menu_comp {
float: right;
}
#menu_resp {
float: left;
margin-top: 105px;
visibility: hidden;

}

#menu {
float: right;
padding-bottom: 30px;
margin-top: 107px;
z-index: 11111;
}
#menu ul li {
float: left;
list-style-type: none;
width: 80px;
height: 20px;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
text-align: center;
}
#menu ul li a {
color: #000000;
text-decoration: none;
width: 80px;
height: 20px;
}
#menu ul li a:hover {
color: #66CCCC;
border-bottom: 1px solid #66CCCC;
width: 80px;
height: 20px;
text-align: center;
padding-bottom: 10px;
}

@media screen and (min-width:553px) and (max-width:766px){
#menu_resp {
display: block;
text-align: center;
visibility: visible;
float: right;
}
#menu ul li {
margin-bottom: 5px;
background-color: #FFFFFF;
width: 50%;
float: right;
}
#menu ul li a:hover {
border-width: 0px;
border-style: none;
}

#menu {
position: fixed;
top: 50px;
right: -400px;
width: 100%;
height: auto;
}

}


EL MENU:

<div id="menu_comp">
<div id="menu_resp"><a href="#"><img src="imagweb/menu.png" alt="" width="45" height="45" id="menu_btn"/></a></div>
<nav id="menu" class="desbloq">

<ul>
<li class="option"><a href="#serviciosclick" title="Servicios">Servicios</a></li>
<li class="option"><a href="#sobremiclick" title="Sobre mí">Sobre mí</a></li>
<li class="option"><a href="#portfolioclick" title="Portfolio">Portfolio</a></li>
<li class="option"><a href="#contactoclick" title="Contacto">Contacto</a></li>
</ul>
</nav>
</div>

Un millon de gracias
  #8 (permalink)  
Antiguo 29/11/2015, 20:05
 
Fecha de Ingreso: septiembre-2015
Mensajes: 7
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problemas con un menu

Hola, que tal?!

Bueno, hasta ahora no se si te entendí del todo. Supongo...

El problema: « ...se abre el menú, pincho en una opción, se desplaza hasta la zona pero el menú sigue abierto ».

1) « ...que el problema lo tengo para pantallas pequeñas ».

Al usar @media screen, asegurate de tener la METAetiqueta; generalmente las METAetiquetas van dentro de la etiqueta <head>:

Código:
<!--  <head> -->
<meta content='width=device-width,initial-scale=1.0,maximum-scale=2.0' name='viewport'/>
2) « ... Pincho en una opción, se desplaza hasta la zona pero el menú sigue abierto ».

Según puedo ver en el HTML, estas opciones no te llevan a otra URL que implicaría recargar página, sino que te desplazan a una zona específica (href="#serviciosclick"). Prueba reemplazar el código JS anterior con este:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.       var contador = 1;
  3.      
  4.       $('#menu_resp a').click(function(){
  5.         if(contador == 1){
  6.           $('#menu').animate({right: '0px'}, 'slow');
  7.           contador = 0;
  8.         }
  9.         else {
  10.           $('#menu').animate({right: '-350px'}, 'slow');
  11.           contador = 1;
  12.         }
  13.       });
  14.      
  15.       //al pinchar en alguna opción
  16.       $('#menu ul li').click(function(){
  17.           $('#menu').animate({right: '-350px'}, 'slow');
  18.           contador = 1;
  19.       });
  20.  
  21.     });

Espero que con eso logras solucionar el problema.. Un saludo!

Última edición por henovec; 29/11/2015 a las 23:44
  #9 (permalink)  
Antiguo 30/11/2015, 04:27
 
Fecha de Ingreso: enero-2015
Mensajes: 26
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Problemas con un menu

Lo que me has puesto tu no me funcion. Es decir que al pinchar en menu ul li a, se desplaza hasta el sitio pero el menu sigue abierto.
Yo lo he puesto de esta manera y me funciona, pero si subi a la parte superior de la pagina y pincho otra vez en el boton menu-responsive debo hacer 2 click ya que con un solo click no me hace caso :S
Esto es lo que yo he puesto que es basicamente lo mismo:
/*menu_resp*/
$(document).ready(function(){
var contador = 1;

$('#menu_resp').click(function(){
if(contador == 1){
$('#menu').animate({right: '0px'}, 'slow');
contador = 0;
}
else {
$('#menu').animate({right: '-550px'}, 'slow');
contador = 1;
}

});
/* quitar bloqueo menu*/
$(document).ready(function(){
$('#menu ul li a').click(function(){
$('#menu').animate({right: '-550px'}, 'slow');

})
});

Lo de Meta si que lo tengo puesto, pero no es igual que el que tu me has puesto.
Que diferencia tienen?

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />



Cita:
Iniciado por henovec Ver Mensaje
Hola, que tal?!

Bueno, hasta ahora no se si te entendí del todo. Supongo...

El problema: « ...se abre el menú, pincho en una opción, se desplaza hasta la zona pero el menú sigue abierto ».

1) « ...que el problema lo tengo para pantallas pequeñas ».

Al usar @media screen, asegurate de tener la METAetiqueta; generalmente las METAetiquetas van dentro de la etiqueta <head>:

Código:
<!--  <head> -->
<meta content='width=device-width,initial-scale=1.0,maximum-scale=2.0' name='viewport'/>
2) « ... Pincho en una opción, se desplaza hasta la zona pero el menú sigue abierto ».

Según puedo ver en el HTML, estas opciones no te llevan a otra URL que implicaría recargar página, sino que te desplazan a una zona específica (href="#serviciosclick"). Prueba reemplazar el código JS anterior con este:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.       var contador = 1;
  3.      
  4.       $('#menu_resp a').click(function(){
  5.         if(contador == 1){
  6.           $('#menu').animate({right: '0px'}, 'slow');
  7.           contador = 0;
  8.         }
  9.         else {
  10.           $('#menu').animate({right: '-350px'}, 'slow');
  11.           contador = 1;
  12.         }
  13.       });
  14.      
  15.       //al pinchar en alguna opción
  16.       $('#menu ul li').click(function(){
  17.           $('#menu').animate({right: '-350px'}, 'slow');
  18.           contador = 1;
  19.       });
  20.  
  21.     });

Espero que con eso logras solucionar el problema.. Un saludo!
  #10 (permalink)  
Antiguo 30/11/2015, 10:01
 
Fecha de Ingreso: septiembre-2015
Mensajes: 7
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problemas con un menu

Hola marinamarina,

Primero decirte que no se porque el último código no te funciona. Seguro lo pusiste bien o no cambiaste nada en el HTML?

« ... y pincho otra vez en el boton menu-responsive debo hacer 2 click ya que con un solo click no me hace caso »

Bueno, el problema ahí es que se te olvidó modificar el valor de la variable contador en 1; y también no tienes que volver a llamar a document.ready. El código quedaría así:

Código:
$(document).ready(function(){
   var contador = 1;

   $('#menu_resp').click(function(){
   if(contador == 1){
   $('#menu').animate({right: '0px'}, 'slow');
     contador = 0;
   }
   else {
     $('#menu').animate({right: '-550px'}, 'slow');
     contador = 1;
   }

   });

   //quitar bloqueo menu
   $('#menu ul li a').click(function(){
     $('#menu').animate({right: '-550px'}, 'slow');
     contador = 1; //modificar valor contador
   });
});
Nota: Por la METAetiqueta no te preocupes, si te funciona dejalo así, pues.

Etiquetas: javascript
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 10:03.