Cuando cambié el portfolio a la plataforma Indexhibit (¿remember?) pensé que ya iba a dar por finiquitado el tema pero podía planteárseme el problema de que las opciones de menú fueran demasiadas y que sobrepasasen la altura de la ventana del navegador con la consecuente pérdida de lo que yo llamo “facilidad de clic”:

Todo elemento no visible desde el primer momento en la ventana de navegador, ofrece un porcentaje menor de posibilidad a ser clicado.

Paraonias no me faltan como véis. En realidad, es más por estética que por otra cosa. Así que pensé en retomar la idea de emplear un menú colapsable supervitaminado más conocido actualmente como menú acordeón.

Primer problema: La principal cuestión que puede surgir ante la idea de incluir alguna modificación en nuestra plantilla es dónde meter la zarpa ya que Indexhibit nos lo da todo mascadito para que sólo sea escribir y subir imágenes. Bueno, de algún lado tendrá que salir, ¿no?. Vamos a echarle una ojeada al código final que ofrece el index de mi portfolio, en concreto, a los listados de proyectos:

Vemos que Indexhibit arroja una simple lista de elementos donde el primer elemento es el título de la sección y el resto los proyectos.

Segundo problema: para poder hacer un menú colapsable necesitamos que el “disparador” (el elemento que al hacer clic nos despliega la información oculta) esté fuera, es decir, no forme parte del mismo bloque que se oculta. Nos hemos juntado con otro problema sin haber resuelto el primero. Calma que es más sencillo de lo que parece.

Indexhibit hace lo que tú quieres que haga

Indexhibit puede organizar proyectos de manera cronológica o por sección (acuérdate de qué configuración estes usando porque es necesario) asi que también tendrá que existir alguna opción que determine el actuar de una forma u otra. Pues nada, buscamos dentro de todos los archivos que configuran la estructura de Indexhibit. O también puedes ahorrarte este paso e irte directamente a la solución al primer problema. El archivo que hay que toquetear es el index.php que se encuentra en [carpeta-Indexhibit] > [ndxz-studio] > [site] > [plugin]

¿Ya? Bueno pues en ese archivo es donde se definen las funciones chronological() y sectional(). Dentro de ellas está la solución al segundo problema.

La imagen superior muestra la parte de código donde se concatena lo que a nosotros nos interesa. Es ahí donde Indexhibit nos saca los títulos de las secciones como si fueran elementos dentro de las listas que conforman las secciones. ¿Qué hacemos entonces? Pues muy sencillo, cambiamos los títulos para que sean otro tipo de elementos fuera de la lista. En mi caso he escogido encabezados h3.

A tener en cuenta:

• El código aparece dentro de las dos funciones (chronological y sectional). Modifica el que corresponda en función de cómo tengas tu organizado Indexhibit.
• Fíjate en que las dos líneas modificadas han cambiado su orden. Así conseguimos que el elemento esté fuera del listado.
• Es imprescindible que los elementos “disparadores” tengan enlace, aunque sea vacío, para poder hacer luego el menú y que funcione correctamente.
• Recuerda modificar la hoja CSS en caso necesario.

Subimos el archivo modificado a su correspondiente carpeta y si todo ha ido bien, el código de nuestra página tendría que verse modificado. En el caso de ejemplo:

Perfecto. Ahora ya podemos meternos en lo que sería hacer el menú en sí.

Aprovechándose de Indexhibit

En un principio iba a hacerme el menú con mootools porque ya tengo el snippet (vamos, que lo tengo hecho en otra web y es cosa de copiar y pegar) pero Indexhibit ya incluye de manera nativa la carga de jQuery. ¿Por qué no aprovecharlo y ahorrarnos un par de Kbytes?

Llegados a este punto podemos ver el vídeo jQuery Expandable Menu [en], probar el jQuery accordion plugin [en] o hacer como yo y emplear este post de Anieto2k como guía para la prueba. Si empleáis este último, notaréis que petardea un poco pero para ver si funciona va perfecto y sirve como referencia para hacerlo de manera diferente. También podéis emplear este mismo método pero haciendo uso de fadeIn() y fadeOut() en vez de slideUp() y slideDown(). Quedaría a vuestro gusto.

Siguiendo el código del ejemplo de Anieto2k y con las pertinentes modificaciones para el caso de ejemplo:

Y listo. No ha sido tan dificil. Cabe mencionar que dependiendo del diseño de nuestra plantilla, el menú nos hará ganar o perder puntos en términos de usabilidad. Y me explico: en la plantilla por defecto, cada vez que hacemos clic sobre un proyecto en Indexhibit, nos estamos dirigiendo a un html diferente y por lo tanto el menú se volverá a cargar en su posición inicial. Esto obliga a realizar “clics extra” a lo largo de la navegación a menos que 1)usemos frames o 2)usemos Ajax para cargar el contenido de las secciones sin recargar la página al completo. La opción 1 no me gusta para nada y la 2 se escapa a mis conocimientos actuales. Quizá en un futuro…

PD: ¿Qué no sabes qué es Indexhibit [en]?