Menús desplegables con JQuery
Llevamos ya bastante tiempo trabajando en la nueva web de Artefacto, que sustituirá a nuestros venerables vagones de metro, y que estará lista, si todo marcha según lo previsto, a lo largo de estos últimos días del año.
Más adelante revelaremos más detalles sobre la web, por el momento sólo quiero escribir un pequeño apunte técnico relacionado con la navegación. Hemos decidido hacer un pequeño menú desplegable utilizando Javascript, para lo cual una opción muy interesante resultó ser Redux (ver ejemplo), un menú de tipo acordeón escrito en apenas 40 líneas de código gracias a JQuery. Es sencillo de configurar y además proporciona persistencia mediante cookies.
Sólo tiene –tenía– un pero. Y es que si se utiliza en páginas con enlaces semánticos, el script guarda una cookie distinta para cada ruta visitada, al interpretar la dirección como un camino de directorios. Al final, esto hace que cada página del sitio tenga una memoria del menú distinta. En fin, para volverse loco –puedo dar fe de ello–. Sin embargo, la solución –no tanto el diagnóstico– es bastante sencillo. Basta sustituir la línea:
$.cookie(parent, this.className);
Por esta otra:
$.cookie(parent, this.className, {path: '/'});
Que inserta la cookie asociada al directorio raíz del sitio. Lo cual de paso nos sirve como excusa para admirar dos cosas: la increíble potencia de JQuery y lo increíblemente práctico que es el plugin para la gestión de cookies de que dispone. Poesía pura :-)