elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda con un menú
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: 1 [2] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda con un menú  (Leído 4,637 veces)
flacc


Desconectado Desconectado

Mensajes: 849



Ver Perfil WWW
Re: Ayuda con un menú
« Respuesta #10 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


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.809



Ver Perfil WWW
Re: Ayuda con un menú
« Respuesta #11 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


« Última modificación: 4 Enero 2012, 12:03 pm por drvy | BSM » En línea

Spider-Net


Desconectado Desconectado

Mensajes: 1.165


Un gran poder conlleva una gran responsabilidad


Ver Perfil WWW
Re: Ayuda con un menú
« Respuesta #12 en: 4 Enero 2012, 08:11 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
En línea

chocola

Desconectado Desconectado

Mensajes: 282



Ver Perfil
Re: Ayuda con un menú
« Respuesta #13 en: 4 Enero 2012, 18:34 pm »

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".
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.809



Ver Perfil WWW
Re: Ayuda con un menú
« Respuesta #14 en: 4 Enero 2012, 23:07 pm »

Copialo tal y como esta y ponlo en un archivo nuevo reemplazando al viejo.


Saludos
En línea

flacc


Desconectado Desconectado

Mensajes: 849



Ver Perfil WWW
Re: Ayuda con un menú
« Respuesta #15 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
En línea

chocola

Desconectado Desconectado

Mensajes: 282



Ver Perfil
Re: Ayuda con un menú
« Respuesta #16 en: 5 Enero 2012, 14:40 pm »

Copialo tal y como esta y ponlo en un archivo nuevo reemplazando al viejo.


Saludos
No  funciona :-( :-( :-(
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.809



Ver Perfil WWW
Re: Ayuda con un menú
« Respuesta #17 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
« Última modificación: 5 Enero 2012, 17:28 pm por drvy | BSM » En línea

chocola

Desconectado Desconectado

Mensajes: 282



Ver Perfil
Re: Ayuda con un menú
« Respuesta #18 en: 5 Enero 2012, 20:15 pm »

Muchas gracias  ;-) ;-) ;-)
En línea

Páginas: 1 [2] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
DVD sin menu... (ayuda)
Multimedia
g-unit 3 1,515 Último mensaje 1 Septiembre 2005, 14:14 pm
por g-unit
ayuda con menu
Programación Visual Basic
bautistasbr 4 855 Último mensaje 10 Marzo 2006, 21:23 pm
por bautistasbr
ayuda con menu vcd
Multimedia
lyenda 3 977 Último mensaje 25 Agosto 2006, 07:39 am
por lyenda
como lleno los datos que tiene un menu a otro menu vacio, en asp.net c#
.NET (C#, VB.NET, ASP)
ivan05f 2 2,673 Último mensaje 8 Noviembre 2007, 18:58 pm
por ivan05f
! Ayuda ! -menu en c#
.NET (C#, VB.NET, ASP)
ronald hisp 6 9,128 Último mensaje 21 Diciembre 2008, 18:17 pm
por CrÄsH
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines