Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: chocola en 3 Enero 2012, 05:05 am


Título: Ayuda con un menú
Publicado por: chocola en 3 Enero 2012, 05:05 am
Hola a todos.

Hace unos días encontré un menú hecho en java y tengo la siguiente problema:
Al pinchar en cualquier enlace del menú se cierra la sección donde esta el enlace
ejemplo :
al pinchar en enlace Linux se cierra la sección de S.O

enlace al menú en vivo:

http://calirojas.com/ejemplos/menu-acordeon-en-jquery/#

enlace al código del menú :
http://calirojas.com/2011/11/24/menu-en-forma-de-acordeon-jquery/

Lo he intentado arreglar por mi cuenta pero no entiendo jquery, de momento solamente entiendo php,html y css.  :( :( :(

Título: Re: Ayuda con un menú
Publicado por: ‭lipman en 3 Enero 2012, 12:00 pm
Cambiando 2 cosas no se me ocurre arreglarlo, ya que con jquery (no con java como tu dices) todavia estoy empezando, pero sí que te puedo explicar la razón de que te pase eso.

Básicamente, la acción de mostrar/ocultar las subcategorias, se realiza cuando pinchas en el div que tiene por id clsContenedor, y claro, esto sucede no solo cuando pinchas en el titulo de la categoria, sino también cuando pinchas en su interior (las subcategorias).

Algo es algo. Un saludo

Título: Re: Ayuda con un menú
Publicado por: chocola en 3 Enero 2012, 18:25 pm
Cita de: lipman en  3 Enero 2012, 12:00 pm
Cambiando 2 cosas no se me ocurre arreglarlo, ya que con jquery (no con java como tu dices) todavia estoy empezando, pero sí que te puedo explicar la razón de que te pase eso.

Básicamente, la acción de mostrar/ocultar las subcategorias, se realiza cuando pinchas en el div que tiene por id clsContenedor, y claro, esto sucede no solo cuando pinchas en el titulo de la categoria, sino también cuando pinchas en su interior (las subcategorias).

Algo es algo. Un saludo
Gracias.

Alguien tiene alguna solución ?

Título: Re: Ayuda con un menú
Publicado por: Caster en 3 Enero 2012, 18:31 pm
No entiedno NADA de esto pero en el código pone esto:
Código
  1. <li><a href="#">SQL</a></li>
En "#" me parece que dice que no direcciona a otra web, en vez de "#" tendría que ir la ruta de la web a direccionar.

Alomejor lo que cabao de decir es una tontería pero solo pretendo ayudar  :)

Saludos

Título: Re: Ayuda con un menú
Publicado por: chocola en 3 Enero 2012, 18:40 pm
Cita de: |Demon| en  3 Enero 2012, 18:31 pm
No entiedno NADA de esto pero en el código pone esto:
Código
  1. <li><a href="#">SQL</a></li>
En "#" me parece que dice que no direcciona a otra web, en vez de "#" tendría que ir la ruta de la web a direccionar.

Alomejor lo que cabao de decir es una tontería pero solo pretendo ayudar  :)

Saludos

Eso esta hecho así en el ejemplo para que cuando alguien pinche en el enlace no le saque del ejemplo.

Eso no tiene nada que ver, pero gracias de todos modo.

Título: Re: Ayuda con un menú
Publicado por: flacc en 3 Enero 2012, 20:44 pm
no te entiendo, el menu tiene # para que no direccione a otra parte, solo pon el code en tu web y en vez de # colocas un link como http://foro.elhacker.net y debería funcionar, no hay que saber ni jquery para darse cuenta, ahora si con lo que te dije sigue pasando ya escapa de mis manos pués yo no se jquery...saludos

Título: Re: Ayuda con un menú
Publicado por: chocola en 3 Enero 2012, 21:16 pm
Cita de: Mini_Nauta en  3 Enero 2012, 20:44 pm
no te entiendo, el menu tiene # para que no direccione a otra parte, solo pon el code en tu web y en vez de # colocas un link como http://foro.elhacker.net y debería funcionar, no hay que saber ni jquery para darse cuenta, ahora si con lo que te dije sigue pasando ya escapa de mis manos pués yo no se jquery...saludos

Chicos leer arriba, el tema no va de eso.

Título: Re: Ayuda con un menú
Publicado por: chocola en 3 Enero 2012, 21:57 pm
.

Título: Re: Ayuda con un menú
Publicado por: flacc en 4 Enero 2012, 01:26 am
por eso mismo digo que no te entiendo, si me explicas bién lo que quieres hacer demás que te puedo ayudar...saludos

Título: Re: Ayuda con un menú
Publicado por: chocola en 4 Enero 2012, 03:00 am
Cita de: Mini_Nauta en  4 Enero 2012, 01:26 am
por eso mismo digo que no te entiendo, si me explicas bién lo que quieres hacer demás que te puedo ayudar...saludos

El problema consiste en que en el menú cuando haces clic en cualquier enlace se cierra la categoría dentro de la cual esta el enlace, ejemplo:

En el menú por defecto la categoría Sistemas Operativos esta desplegada, cuando pinchas en cualquier enlace por ejemplo Linux se cierra el categoria Sistemas operativos y eso es algo incomodo y pasa por esto:

Cita de: lipman en  3 Enero 2012, 12:00 pm
Cambiando 2 cosas no se me ocurre arreglarlo, ya que con jquery (no con java como tu dices) todavia estoy empezando, pero sí que te puedo explicar la razón de que te pase eso.

Básicamente, la acción de mostrar/ocultar las subcategorias, se realiza cuando pinchas en el div que tiene por id clsContenedor, y claro, esto sucede no solo cuando pinchas en el titulo de la categoria, sino también cuando pinchas en su interior (las subcategorias).

Algo es algo. Un saludo


El problema es que no sabemos como arreglarlo.

Gracias.

Título: Re: Ayuda con un menú
Publicado por: flacc en 4 Enero 2012, 05:26 am
haha ya entendi pero no puedo ayudarte, esta todo muy liado con el code de jquery, pero estoy casi seguro de que se puede lograr casi lo mismo con css3 y html  :P

Título: Re: Ayuda con un menú
Publicado por: #!drvy en 4 Enero 2012, 07:27 am
Hola, la verdad es que me rompí la cabeza hasta que me di cuenta del fallo tonto este  :xD
Esta mal hecho porque actúa ante un click general en el div en el que se aloja, en vez de en un área concreto.

Te dejo el JS con la solución y la lineas corregidas para que lo veas.
Código
  1. $(document).ready(function(){
  2. 	/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
  3. 	titulos de cada uno de esos bloques*/
  4. 	$('.clsActivo').stop(true,true).slideToggle().parent().find('.clsSeccion').addClass('clsArriba');
  5. 	/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
  6. 	borde inferior*/
  7. 	$('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
  8. 	/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
  9. 	se muestren cerrados (sin la clase clsActivo)*/
  10. 	$(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');
  11.  
  12. 	/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
  13. 	$('.clsContenedor span').click(function(){
  14. 		/*mostramos u ocultamos la lista (ul) utilizando slideToggle*/
  15. 		$(this).next().find('ul').stop(true,false).slideToggle('fast',function(){
  16. 			//verificar la clase que tiene el titulo del contenedor
  17. 			if($(this).parent().find('.clsSeccion').hasClass('clsAbajo')){
  18. 				//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
  19. 				$(this).parent().find('.clsSeccion').removeClass('clsAbajo').addClass('clsArriba');
  20. 			}else{
  21. 				//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
  22. 				$(this).parent().find('.clsSeccion').removeClass('clsArriba').addClass('clsAbajo');
  23. 			}
  24. 		});
  25. 	});
  26.  
  27. });
  28.  

En vez de esperar a un click general del la clase .clsContenedor, este esperara a una click de un span que se aloje en un elemento que tenga esa clase. Así no actúa sobre todo el div, sino solo sobre el titulo.

La linea 15 he añadido el next(), para que seleccione el siguiente y así no se confunda consigo mismo xD.

También, te recomiendo que le añadas al CSS una linea con el siguiente contenido.

Código
  1. .clsContenedor ul li a {outline:none !important;}

La razón es, que al no cerrarse (que es lo que queremos), deja el focus sobre el link y queda un tanto feo.

Espero que te haya ayudado.

EDIT: Ahora si que me tengo que romper la cabeza por no leer a fondo el comentario de @lipman  :xD

Saludos

Título: Re: Ayuda con un menú
Publicado por: Spider-Net en 4 Enero 2012, 08:11 am
Cita de: Mini_Nauta en  4 Enero 2012, 05:26 am
haha ya entendi pero no puedo ayudarte, esta todo muy liado con el code de jquery, pero estoy casi seguro de que se puede lograr casi lo mismo con css3 y html  :P

Que está todo muy liado? Está todo perfectamente identado, organizado y comentado. Que tú no lo entiendas no quiere decir que esté liado xD

Título: Re: Ayuda con un menú
Publicado por: chocola en 4 Enero 2012, 18:34 pm
Cita de: drvy | BSM en  4 Enero 2012, 07:27 am
Hola, la verdad es que me rompí la cabeza hasta que me di cuenta del fallo tonto este  :xD
Esta mal hecho porque actúa ante un click general en el div en el que se aloja, en vez de en un área concreto.

Te dejo el JS con la solución y la lineas corregidas para que lo veas.
Código
  1. $(document).ready(function(){
  2. 	/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
  3. 	titulos de cada uno de esos bloques*/
  4. 	$('.clsActivo').stop(true,true).slideToggle().parent().find('.clsSeccion').addClass('clsArriba');
  5. 	/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
  6. 	borde inferior*/
  7. 	$('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
  8. 	/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
  9. 	se muestren cerrados (sin la clase clsActivo)*/
  10. 	$(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');
  11.  
  12. 	/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
  13. 	$('.clsContenedor span').click(function(){
  14. 		/*mostramos u ocultamos la lista (ul) utilizando slideToggle*/
  15. 		$(this).next().find('ul').stop(true,false).slideToggle('fast',function(){
  16. 			//verificar la clase que tiene el titulo del contenedor
  17. 			if($(this).parent().find('.clsSeccion').hasClass('clsAbajo')){
  18. 				//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
  19. 				$(this).parent().find('.clsSeccion').removeClass('clsAbajo').addClass('clsArriba');
  20. 			}else{
  21. 				//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
  22. 				$(this).parent().find('.clsSeccion').removeClass('clsArriba').addClass('clsAbajo');
  23. 			}
  24. 		});
  25. 	});
  26.  
  27. });
  28.  

En vez de esperar a un click general del la clase .clsContenedor, este esperara a una click de un span que se aloje en un elemento que tenga esa clase. Así no actúa sobre todo el div, sino solo sobre el titulo.

La linea 15 he añadido el next(), para que seleccione el siguiente y así no se confunda consigo mismo xD.

También, te recomiendo que le añadas al CSS una linea con el siguiente contenido.

Código
  1. .clsContenedor ul li a {outline:none !important;}

La razón es, que al no cerrarse (que es lo que queremos), deja el focus sobre el link y queda un tanto feo.

Espero que te haya ayudado.

EDIT: Ahora si que me tengo que romper la cabeza por no leer a fondo el comentario de @lipman  :xD

Saludos

He modificado el JS Y he añadido la linea a CSS y no me funciona, no hace nada cuando le doy a clic.
Creo que no acepta en la linea 15  el "clsContenedor span".

Título: Re: Ayuda con un menú
Publicado por: #!drvy en 4 Enero 2012, 23:07 pm
Copialo tal y como esta y ponlo en un archivo nuevo reemplazando al viejo.


Saludos

Título: Re: Ayuda con un menú
Publicado por: flacc en 5 Enero 2012, 02:04 am
me referia a liado para mi, estoy a costumbrado a leer el code tal cual sin comentarios  :silbar:, solo el code habla por si solo para mi pero no se js asi que me lia  :xD

Título: Re: Ayuda con un menú
Publicado por: chocola en 5 Enero 2012, 14:40 pm
Cita de: drvy | BSM en  4 Enero 2012, 23:07 pm
Copialo tal y como esta y ponlo en un archivo nuevo reemplazando al viejo.


Saludos
No  funciona :-( :-( :-(

Título: Re: Ayuda con un menú
Publicado por: #!drvy en 5 Enero 2012, 15:43 pm
Haha, fallo mio... le deje con el find(ul) y dentro del span no hay ningún ul  ;-) ;-).

Prueba asi:

Código
  1. $(document).ready(function(){
  2. 	/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
  3. 	titulos de cada uno de esos bloques*/
  4. 	$('.clsActivo').stop(true,true).slideToggle().parent().find('.clsSeccion').addClass('clsArriba');
  5. 	/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
  6. 	borde inferior*/
  7. 	$('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
  8. 	/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
  9. 	se muestren cerrados (sin la clase clsActivo)*/
  10. 	$(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');
  11.  
  12. 	/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
  13. 	$('.clsContenedor span').click(function(){		
  14. 		/*mostramos u ocultamos la lista (ul) utilizando slideToggle*/
  15. 		$(this).next().stop(true,false).slideToggle('fast',function(){			
  16. 			//verificar la clase que tiene el titulo del contenedor
  17. 			if($(this).parent().find('.clsSeccion').hasClass('clsAbajo')){
  18. 				//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
  19. 				$(this).parent().find('.clsSeccion').removeClass('clsAbajo').addClass('clsArriba');
  20. 			}else{
  21. 				//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
  22. 				$(this).parent().find('.clsSeccion').removeClass('clsArriba').addClass('clsAbajo');
  23. 			}
  24. 		});
  25. 	});
  26.  
  27. });
  28.  

La linea esa del css también modifica la si no lo has hecho.
PD:

Te lo dejo online por si quieres verlo xD
Código:
http://drvy.net/dev/menuEHN/

Saludos

Título: Re: Ayuda con un menú
Publicado por: chocola en 5 Enero 2012, 20:15 pm
Muchas gracias  ;-) ;-) ;-)


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines