Diseño menu avanzado joomla Plugin Mega Menu

Ultimamente todos hemos visto la espectacularidad del menu de JA Purity de Joomlart en las ultimas versiones de joomla en español, para poder disponer de un menu de ese tipo de momento tendremos que conformarnos en tener que utilizar una plantilla de Joomlart con su framework T3, aunque solo es cuestion de tiempo que se pueda aplicar a otras plantillas.

Dicho esto, pasare a comentar como utilizar el plugin Joomla JA Menu parameters de Joomlart, el cual nos permite realizar menus joomla espectaculares, insertando desde varias lineas de texto, modulos, hasta videos .

Deben asegurarse  que estan trabajando con la última versión de este plugin, el cúal se puede descargar gratuitamente desde JoomlArt. El objetivo de este plugin es hacer mas amena la navegabilidad de su web Joomla, llevando a la funcionalidad de una pagina de inicio a su objetivo principal que es poder acceder a cualquier parte de una web desde la misma pagina de inicio…

Son varias las opciones para añadir a los menus, las cuales mostrare y redactare como poder realizar esas tareas sencillas, aunque a primera vista parece algo complicado, a continuacion veran que no es para tanto.

He incluido imagenes de cada proceso por orden numérico para que les sea mas facil entenderlo.

Lo primero que tenemos que saber es que este plugin no funciona con cualquier plantilla, fue diseñado para trabajar con el Framework T3, y de momento solo funciona con las plantillas siguientes de Joomlart.

Todas descargables desde Joomlart.com, previa subscripción, salvo Ja purity II que es gratuita. Joomlart permite la descarga de sus plantillas tras el pago de una subscripcion de entre 3 y 1 año.

Las subscripciones para plantillas joomla solo son limitadas en el tiempo y pueden descargarse absolutamente todas las plantillas joomlart disponibles, que son una cuantas.

El listado completo de las plantillas con Mega Menu

Cuando se instala una plantilla que incluye Mega Menu, se selecciona por defecto esa opción, pero se necesita el plugin JA Menu parameters para hacerlo funcionar.

Lo instalamos desde Extensiones / Instalar – Desinstalar, una vez instalado lo activamos desde Extensiones / Gestor Plugins. El siguiente paso es comprobar desde Menus / Menu Principal desde cualquier item que tengamos en este menu, si aparece la opcion Parameters (JA Extended) al editar un item.

Al acceder a la opcion de ajuste para parametros extras de nuestro menu observaremos al final del mismo, al margen de las opciones de ajuste que se muestran anteriormente en la parte superior, que hay tres opciones que son Child menu items, Módulos, Module positions, las cuales tienen una funcion determinada que explicare a continuacion, no antes de ver las posibilidades que ofrece el plugin en su conjunto.Ahora comenzaremos a diseñar nuestro primer menu de aspecto avanzado siguiendo los siguientes pasos, que paso a redactar.

1. Tabla de Contenidos

   • Añadir iconos en el menu
   • Formar Grupos de los enlaces de menu (items)
   • Configuración Item padre como separador
   • Mostrar un Modulo en el menu
   • Mostrar un video
   • Video Tutorial de Joomlart para ayudar a configurar el Mega Menu

   Añadir iconos en el menu

   Esta técnica no solo es exclusiva de joomlart, si no una opción que se puede implementar en cualquier menu de cualquier plantilla Joomla. Para añadir iconos en nuestro menu, lo primero es subir a /images/stories las imagenes  (iconos) que vamos a utilizar. Su tamaño no debe superar los 16×16 pixeles. Si estan buscando iconos para esa labor un sitio a visitar es www.iconfinder.net, buscador de iconos con  diseños profesionales, desde el cual seguro encontraran lo que estan buscando para su menu. Una vez loclizados los iconos a utilizar, los descargamos y los subimos con nuestro cliente FTP.

   Una vz subidos, accederemos a nuestro panel de administracion joomla y desde Menus / Menu Principal y editar el item o enlace de menu al cual le queremos añadir un icono y en la parte derecha de su pantalla, seleccionaremos Parámetros – Sistema y podremos seleccionar uno de los iconos que previamente hemos subido para colocarlo en el item o enlace de menu que hemos seleccionado.

   Vean el resultado en Freelance Solojoomla , web que realize para ayudar a que los desarrolladores libres (freelance) y solicitantes de desarrollos para que tuvieran un lugar de encuentro y pudiesen interactuar y realizar sus proyectos joomla. Este es el primer paso, y ahora vamos al siguiente paso, el cual solo se puede realizar con la ayuda del plugin JA menu parameters.

2. Formar Grupos de los enlaces de menu (items)

   Este paso nos ayudara a poder mostrar de forma directa los accesos a la mayor parte de nuestra web, muy util para webs de mucho contenido como portales con muchas categorias y secciones. Para mostrarles como proceder, realizare un ejemplo y les ire comentando cada paso, junto a unas imagenes para que les resulte mas sencillo de entender.Lo primero sera elegir  a que enlace de menu (item) vamos a asignar un grupo de item de menu o bien crear uno para luego asignarle uno o mas enlaces de menu. Para esto hay que crear primero un item padre como separador en el menu y ponerle el titulo. Una vez creado, paso a formar dos grupos, cada uno ligado al separador que hemos creado como enlace de menu padre, añadimos los enlaces de menu a cada grupo. Ahora configuramos el item padre y los grupos.

3. Configuración Item padre como separador

   Desplegaremos las opciones de Parameters (JA Extended), incluimos una descripcion breve en Description, luego en Columns indicaremos el numero de columnas que son basicamente la cantidad de grupos a mostrar desde el item padre y segun el ejemplo una tercera columna para mostrar un video, luego en opcion group lo dejaremos en NO.

   Por ultimo en SubMenu Column Width añadiremos de la siguiente manera el ancho de las columnas, la primera columna sera de 240 px y pondremos colw1=240 , la seguna se formara automaticamente y no es necesario añadir los datos de configuracion y para la tercera (la del video) pondremos colw3=360 y guardaremos.Configuracion Grupos:
   Los grupos son mas sencillos de configurar. Seleccionamos el menu de enlace hijo o item hijo ligado el Item padre y le pondremos una descripcion y por ultimo seleccionaremos en Group SI o yes segun este nombrado y guardamos. Esto relacionara cada grupo con el item padre.

4. Mostrar un Modulo en el menu

   El siguiente paso es bastante mas sencillo. Un uso recomendable podria ser el insertar en el mismo menu el modulo de acceso y registro Mod Login. Veamos como poder insertar este modulo.
   El primer paso es ir a Menus / Menu principal* y hacer clic en la imagen “Nuevo” situada arriba a la derecha, aparecera “Seleccionar tipo de elemento del menú”, seleccionamos Separador, le ponemos el nombre apropiado al enlace del menu, para a continuacion hacer clic en “Parameters (JA Extended)”.
   Una vez abierto, pondremos una descripcion breve en ese mismo campo, el de descripcion, en la parte inferior seleccionaremos “Modulos“, se desplegara justo debajo los modulos que tienen instalados, seleccione el nombrado como Registro / Login (Asi lo tengo yo, probablemente cada uno lo tenga de una manera descrito) y guardar. Podran visualizar el modulo de registro y acceso situando el raton encima del item de menu creado. Como pueden comprobar, ha sido bastante sencillo.

5. Mostrar un video

   Este paso es algo mas complicado, pero poco mas. Lo primero que deberemos hacer es crear un modulo HTML personalizado, no se preocupen, el modulo se crea desde Extensiones / Gestor de modulos y haciendo clic en “Nuevo” buscaremos la opcion llamada “Personalizar HTML” haremos clic en la imagen “Siguiente“, hacemos clic en la imagen del editor HTML e introduciremos el codigo embebido del video youtube.

   Al modulo ponganle un nombre que recuerden facilemente. El siguiente paso es crear una posicion nueva que solo utilizaremos para este menester, por ejemplo la posicion tube . Para crear una posicion nueva para nuestra plantilla, editaremos el archivo templatesdetails.xml de nuestra plantilla y añadiremos
   {codecitation style=”brush: xml;”}<position>tube</position> dentro de <position>…..</position>{/codecitation} . Una vez añadida la posicion, podremos seleccionarla al selecionar la opcion Module positions dentro de Parameters (JA Extended), buscamos la posicion tube, selecionamos la posicion y lo relacionamos con el item padre y guardamos.

Video Tutorial de Joomlart para ayudar a configurar el Mega Menu