Jueves, 27 Junio 2013 22:47

Menús más vistosos con jQuery Slide-Down-Box Menu en Joomla 2.5 y 3.1

Escrito por 
CMS:  Joomla! |  Versión:  2.5/3.x |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  10 minutos


jQuery Slide-Down-Box MenuEn ocasiones nos centramos mucho en que nuestra Tienda online tenga todo bien ajustado, que el carrito de compra de VirtueMart se comporte correctamente, que las pasarelas de pago estén bien configuradas, que los proveedores tengan correctamente asociados los productos que vendemos y un sinfín de parámetros que son fundamentales para el correcto funcionamiento de la web y de la Tienda en concreto aunque esto es extrapolable a otros perfiles de webs, ya sean Empresas, canales de noticias, etc.

Tan centrados andamos en eso que olvidamos la estética de la web, aunque cabe decir que hoy día, con la ingente cantidad de plantilla existentes en el mercado, esto ha mejorado mucho y no se requieren grandes dosis de desarrollo para personalizar la web nuestro gusto.

Vamos a darle una pincelada de alegría al menú principal de la web para que llame la atención y tenga un comportamiento menos clásico.

Para ello utilizaremos un módulos que trabaja con Joomla 2.5 y que utiliza la librería jQuery y jQuery Plugin Easing para hacer el deslizamiento hacia abajo y la animación de imágenes.

El módulo se llama jQuery Slide-Down-Box Menu y está desarrollado por jExtensions.com y no localizable en el JED.


Descargar jQuery Slide-Down-Box Menu desde la web del autor.

Obtener Iconos gratuitos en formato PNG transparente.


¿Como instalo y configuro el módulo?

  • Descargar el módulo e instalarlo en Joomla desde el Gestor de Extensiones, Instalar.
  • Publicar el módulo en una posición donde mostrarlo (es posible que no exista posición para sustituir el menú habitual).
  • Activar o desactivar la última librería jQuery (se carga desde Google). Si otro módulo o la plantilla ya está utilizando la librería jQuery, no hay que cargarlo a través de este módulo.
  • Establecer el ancho del módulo. El valor por defecto es 960px (en píxeles), pero se puede cambiar para adaptarlo a cualquier plantilla.
  • Indicar el número de ítems del menú de primer nivel a mostrar, para ajustarse al máximo con el contenedor del menú (en este caso 960 píxeles). Lo recomendable es entre 5 o 7 ítems, con menos o más elementos, el menú no queda muy agradable.
  • Importante: No olvidar añadir el icono correspondiente desde el Gestor de Menús, Menú Principal, Tipo de opciones para los Enlaces.

El resto de personalizaciones para componer un menú como el que mostramos en la siguiente captura deberás verlas en el vídeo.



En este vídeo mostramos la instalación y personalización del modulo así como la inserción de iconos a los ítems de menú existentes.





¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+