DW: ¿Acordeon spry dentro de otro?

[elratonperez]

Hola. Estoy trabajando con Dreamweaver y necesito hacer un menú desplegable vertical. Dado que irá en un marco lateral muy estrecho, creo que un acordeón spry sería la solución ideal. He probado uno normal y funciona perfectamente, pero cuando intento meter uno dentro de otro, todo son problemas.

La idea es que tenga esta estructura:

Tema 1
__Capítulo 1.1
____Sección 1.1.1
____Sección 1.1.2
____Sección 1.1.3
__Capítulo 1.2
____Sección 1.2.1
____Sección 1.2.2
Tema 2
__Capítulo 2.1
____Sección 2.1.1
____Sección 2.1.2
__Capítulo 2.2
...

¿Es posible meter un acordeón dentro de otro? Si es así, agradecería que me orientárais un poco.

Gracias por adelantado y ¡saludos!

[juaniquillo]

no creo que un acordeón sea lo indicado. creo que saldrías mejor implementando algo como este plugin de jquery:

http://jquery.bassistance.de/treeview/demo/

[elratonperez]

Hola juaniquillo, gracias por responder. Creo que el ejemplo que puse, más que aclarar, ha liado más las cosas. Solo trataba de hacer ver que necesito un menú de "3 niveles". El problema que tengo es que la barra lateral es muy estrecha y los menús no pueden abrirse desplazándose hacia la derecha porque no caben, por eso creo que los acordeones son una buena solución en este caso.

Gracias por tu sugerencia de todas formas, y si sabes hacer lo que comento... ¡aquí estoy dispuesto a aprender!

[juaniquillo]

Con el ejemplo que te di puedes alterar el css para que todo esté al mismo nivel, pero bueno. Yo pude meter un acordeón dentro de otro. Aquí puse 3 uno dentro de otro:

http://juaniquillo.com/codigo/dreamw...acordeon1.html

La verdad es que casi no se entiende ya que tienen el mismo CSS.

[elratonperez]

Bueno, pues después de perder toda la tarde con ésto, más o menos conseguí lo que quería. Efectivamente se puede meter un acordeón dentro de otro, pero si se deja tal cual no hay quien se aclare, ya que como se puede ver en tu ejemplo, parte del texto se queda oculto y quedan muchos espacios en blanco, por no hablar de las feas barras de desplazamiento de la derecha. Y como bien apuntas, todo tiene el mismo formato.

Por si a alguien le sirve, he encontrado varias opciones que mejoran bastante el aspecto (perdonad que no ponga las fuentes, pero es que sólo copié los "trucos")

- Para evitar que se abra directamente el primer panel, hay que modificar la línea 37 del archivo SpryAccordion.js de 0 a -1:

this.defaultPanel = -1;

- Para que la altura de los paneles no sea fija y no aparezcan las barras de desplazamiento si el contenido es demasiado extenso, hay que cambiar la línea 51 de true a false:

this.useFixedPanelHeights = false;

- Para evitar que aparezca una línea de puntos alrededor del acordeón en algunos navegadores, en el archivo CSS de Spry Accordion, en la clase .Accordion hay que agregar estas dos instrucciones:

-moz-outline: none;
outline: none;

Quedaria asi:

Accordion {
-moz-outline: none;
outline: none;

Si además de todo ésto, cambiamos los colores del texto de cada nivel y poco más, se nos queda un menú bastante decente.

Juaniquillo, gracias de nuevo por tu interés.

Saludos.

[elratonperez]

Tengo otro problema. Me ha surgido la necesidad de poner un vínculo en la cabecera de un acordeón (donde se hace clic y se abre el panel), pero no funciona. Supongo que se debe a que la función javascript que abre el panel predomina sobre el vínculo. Sé que todo ésto en principio no tiene sentido, pero resultará útil en mi página con marcos, de tal forma que cuando el usuario haga clic, el panel se abra y cambie la página mostrada en el marco principal o "mainFrame".

Espero podáis ayudarme. ¡Saludos!