Introduccin

El nuevo Megamenu sali de la necesidad de impulsar el desarrollo web al siguiente nivel. Es de llegada tambin cambi los sistemas de navegacin clsicos aadiendo
mejoras. Megamenu actualizado es hermanos, dndoles clase y men descripcin o lema partida adicional, pero tambin mejor las !unciones de plantilla aadiendo
men opciones de mando .
En esta seccin vamos a mostrar cmo con!igurar el Megamenu, el sistema de navegacin de tercera generacin. Esta es una gu"a paso a paso sobre cmo editar el men
principal para agregar ms valor a su sitio web.
#sicamente, vamos a mostrarle ejemplos en$
cmo agregar iconos de men%
cmo manejar los parmetros de los "tems del men%
cmo manejar parmetros megamenu espec"!icos%
cmo cargar di!erentes tipos de mdulos como elementos de men%
el documento termina con una re!erencia de parmetro completo &ue le e'plicar todos los parmetros y sus relaciones con los sistemas de navegacin clsicos.
(i usted necesita una mano la comprensin de los conceptos bsicos de )oomla* +estin de mens, consulte la ,e!erencia sobre la gestin de mens .
Elementos del men Edicin
-l instalar plantilla )- .ureza // o cual&uier otro modelo basado 01 2ramewor3, por primera vez, tendr un sistema de mens de navegacin en busca similar a esto$
Esta imagen sugiere no hay parmetros utilizados en este caso particular. 4amos a empezar a establecer ms y ms parmetros y e'plicar cmo hacer &ue se vea igual
&ue la demo, pero primero vamos a ver la lista de veri!icacin.
Lista de verificacin
5on el !in de ser capaz de permitir &ue la lista de caracter"sticas completas de los sistemas de navegacin 01, usted tiene &ue comprobar$
&ue haya instalado el Men JA parmetros del plugin encuentran en ja6purity6ii676stable6version.v8.9.zip:E'tensions: plg_system_jamenuparams zip. (JA
! "rame#or$ %&' slo(
&ue haya establecido la plantilla basada 01 2ramewor3 como su plantilla predeterminada%
&ue haya con!igurado megamenu como su sistema de navegacin por de!ecto, por lo &ue de esta manera usted puede con!igurar todos los ajustes deseados%
0enga en cuenta &ue el uso de )- 01 ;uic3(tart .ac3s blanco )- .ureza // o no re&uieren seguir esta lista, es slo para la instalacin manual.
Adicin de iconos de men
.ara ser capaz de aadir iconos a los elementos de men, primero &ue vas a subir tus iconos !avoritos de la carpeta de imgenes your6site6root : ) stories.
enga en cuenta &ue los iconos no deben e'ceder de 8<'8< p"'eles, una necesidad si se &uiere evitar roturas de diseo. =os usuarios avanzados pueden hacer esto
posible mediante la personalizacin de mens clases de estilo.
- continuacin, en la administracin de bac37end de su sitio web, navegar a los mens 7 Men principal y, a continuacin, haremos clic en Inicio para agregar un icono
apropiado para ello.
*aso % 7 >aga clic en la !icha *armetros (del sistema(+
*aso , 7 (eleccione el icono deseado para -ome elemento de men%
haga clic en el botn .uardar para aplicar estos cambios.
-hora vamos a hacer lo mismo para elemento de men de la tipograf/a0 y luego ir a la inter!az, actualice la pgina y ver cmo se ve*
Edicin de los parmetros de men adicionales
=as primeras versiones de las plantillas 01 utilizan para agregar estos parmetros megamenu en los t"tulos de los elementos de men y esto caus problemas
relacionados (E?. .ara saber lo &ue ha cambiado, por !avor, lea este anuncio !oro .
La agrupacin de los elementos de men
5uando se habilita megamenu por primera vez, los elementos de men no tendrn ningn parmetro megamenu, por lo tanto, se mostrar similar a un men Moo
regulares$
En la imagen superior, se puede ver el E1plora elemento de men &ue tiene tres elementos de men in!antil$
2ise3o0
45o#case Men0
6outu7e @originalmente era 4imeo, pero lo cambi slo para mostrar ms adelante cmo tratar con lA.
4amos a editar cada uno de ellos, ya &ue tenemos &ue mostrar a sus elementos de men in!antil o los nios junto con estos elementos principales. 4amos a hacer clic en
el elemento de men Layout para editarlo.
5omo ven en la imagen de arriba, simplemente seleccionando 4/ en la opcin .rupo agrupar el elemento de men Layout con l es elementos de men in!antil en una
columna compacta, y el dise3o de los padres elemento de men se convierte en la cabeza de la primera columna de la opcin del men principal E1plorar& -hora
podemos hacer lo mismo con los otros elementos del men de dos padres$ Men 45o#case y 6outu7e&
enga en cuenta &ue este parmetro slo se aplica para el sistema de navegacin megamenu.
8onfiguracin de columnas
Bos parece una buena idea mostrar ahora la estructura E1plorar elemento de men. Eche un vistazo ms de cerca a la estructura del men en la parte iz&uierda y la vista
!rontend en el lado derecho. Esto tiene sentido para modi!icar algunos parmetros ms del men$
5omo marcamos las columnas, tenemos &ue cambiar los parmetros E1plora elemento de men para mostrar correctamente es elementos de men in!antil en !rontend,
as" &ue vamos a >aga clic en este elemento de men y personalizar l$
*aso % 7 haga clic en la !icha *armetros (JA E1tended( para editar los parmetros megamenu%
*aso , 7 aadir una descripcin o un eslogan para el elemento de men%
*aso ! 7 ajustar el nmero a tres columnas, &ue se aplicar por cada elemento de men$ =ayout, (howcase Men y Coutube%
*aso 9 7 aadir un ancho personalizado para cada columna para &ue sea atractivo ms visual, especialmente para el reproductor de v"deo de Coutube &ue supera
el ancho de columna predeterminado de DEE p"'eles%
>aga clic en el botn .uardar0 vaya a !rontend, actualice la pgina y ver los cambios.
enga en cuenta &ue este parmetro slo se aplica para el sistema de navegacin megamenu.
8arga de mdulos como elementos de men
En esta seccin vamos a mostrar cmo cargar di!erentes tipos de mdulos como elementos de men. #sicamente, usted puede cargar cual&uier tipo de mdulo$
>0M= personalizado$ los v"deos incrustados, contenido e'terno, la publicidad @anuncios de +oogle o cual&uier otro servicio a!iliado aadeA, v"nculos con la
comunidad, etc%
)oomla regular* mdulos$ mdulo de inicio de sesin, los mdulos de contacto rpida, contenido e'terno se alimenta, en general, todos los mdulos &ue ha
instalado en su con!iguracin%
tambin puede cargar mdulo de posiciones nicas &ue ha establecido para sus mdulos, puesto &ue no estn de!inidas en la plantilla.
0enga en cuenta &ue los elementos de contenido in!antil slo se mostrarn para el sistema de navegacin megamenu, para los dems, men 5((, Moo Men, (plit Men
y cable de derivacin de men, la barra de navegacin slo se mostrarn los t"tulos de men.
8argando mdulos regulares
(lo para as" mostrar un ejemplo, vamos a cargar el )oomla* Login mdulo predeterminado como elemento de men, as" &ue primero vaya al Administrador de
elemento de men del men principal& -hora haga clic en el botn :uevo para agregar un nuevo elemento de men, a continuacin, proceder con los pasos !olowing$
loading ....
*aso % 7 haga clic en 4eparador "tem del men, ya &ue es el tipo ms adecuado para nosotros para cargar mdulos, vamos a cargar el mdulo Iniciar sesin
como el contenido secundario de este elemento de men%
*aso , 7 seleccione un icono para este elemento de men si &uieres%
*aso ! 7 haga clic en la !icha *armetros (JA E1tended( para abrir los parmetros megamenu%
*aso 9 7 escriba un t/tulo para este elemento de men%
*aso ; 7 escriba un eslogan atractivo : descripcin de este elemento de men%
*aso < 7 seleccione Mdulos tipo de contenido%
*aso = 7 desplcese hacia abajo y seleccione "ormulario de acceso0 este es el mdulo &ue vamos a cargar%
vamos a salir de todos los dems parmetros sin tocar%
haga clic en el botn .uardar y vaya al !rontend, actualice la pgina y colocar el ratn sobre el nuevo elemento de men.
8argando video incorporado
=es hemos mostrado anteriormente un reproductor de v"deo de Coutube como un elemento de men. -hora vamos a e'plicar cmo hacerlo, as" &ue primero vamos a
crear un nuevo mdulo -ML personali>ado& /r al .estor de mdulos0 a continuacin, haga clic en el botn :uevo&
*aso % 7 escriba un nombre de mdulo para &ue pueda reconocer este mdulo despus, pero optar por no mostrar el nombre de mdulo%
*aso , 7 escriba un nombre e1clusivo posicin del mdulo, vamos a necesitar el nombre de la posicin posterior%
*aso ! 7 haga clic en el enlace de -ML en el editor para abrir el Editor de cdigo !uente >0M=%
*aso 9 7 pegue el cdigo incrustado de v"deo dentro del rea de te'to%
*aso ; 7 haga clic en el botn Actuali>ar+
-hora usted va a hacer clic en el botn .uardar para guardar la con!iguracin del mdulo.
- continuacin, se abrir el men Administracin de elementos de men principal y haga clic en el botn :uevo en la es&uina superior derecha de tu panel de
administracin. /gual &ue el ejemplo anterior, haga clic en el tipo de elemento de men separador0 y luego continuar con los siguientes pasos$
*aso % 7 haga clic en la !icha *armetros (JA E1tended( para abrir los parmetros megamenu%
*aso , 7 escriba un t"tulo del men%
*aso ! 7 escriba un eslogan atractivo : descripcin para el elemento de men%
*aso 9 7 -segrese de &ue ha asignado este elemento de men separador para el elemento de men padre adecuado%
*aso ; 7 seleccione 4/ en la opcin de grupo para mostrar el elemento de contenido in!antil @el !lash reproductor de v"deo CoutubeA junto con el t"tulo del men%
*aso < 7 posiciones Mdulo seleccione la opcin de poder seleccionar uno%
*aso = 7 recuerda el tubo mdulo de nombre de la posicin nica &ue hemos asignado nuestro mdulo personalizado aF 4amos a seleccionar ahora*
haga clic en el botn .uardar para guardar la nueva con!iguracin de elemento de men, vaya al !rontend, actualice la pgina y ver los cambios.
El resultado de estos cambios se pueden ver en la seccin 5on!iguracin de columnas .
*armetros de referencia
En esta seccin nos gustar"a construir una re!erencia completa para todos los parmetros del sistema de navegacin 01. 4amos a e'plicar cada uno de los parmetros$
!unciones, usos, valores y ejemplos de mejores prcticas.
I*? situando el puntero del ratn sobre cada uno de los parmetros en el panel de edicin de elemento de men, las instrucciones bsicas de uso de pop7up y le dar una
pista sobre cmo con!igurar los parmetros.
Mostrar el t/tulo del men
-l establecer este parmetro en Bo, se oculta el t"tulo del men.
-s", para los elementos de men del segundo nivel o superior, es posible &ue desee ocultar el t"tulo del men. =as cosas ms importantes para recordar$
el valor por de!ecto de este parmetro es 4/0 lo &ue signi!ica 4/0 mostrar el t/tulo+
usted puede ser &ue encuentre esto til para los mdulos de publicidad, las nubes de eti&uetas o contenido e'terno especial%
este parmetro tambin se aplica a la descripcin del parmetro%
establecer este parmetro en :o0 se oculta el t"tulo y tam7i@n otros contenidos nio @elementos de men : modulesA para un elemento de men%
este parmetro slo se aplica a megamenu sistema de navegacin.
Este parmetro es til para los elementos del men &ue no desea &ue aparezca en !rontend, pero se necesita un valor /temid nico para ese "tem del men para ser
utilizado por las pginas de contenido in!antil. Ejemplo$ usted desea utilizar un elemento de men para el registro de usuarios, pero no desea &ue este elemento de men
est visible, ya &ue los usuarios registrados &ue hagan clic en este elemento de men, mientras &ue se registran en, obtendrn un error cr"tico, por lo &ue es mejor para
ocultar el t"tulo de este elemento de men, siempre y cuando lo tenemos publicado y pasando su valor /temid a todos los enlaces de registro.
Men descripcin o lema art/culo
Gna nueva caracter"stica interesante para hacer sus art"culos de men atractivo, interesante o simplemente divertido. =o &ue es importante a&u" sealar$
Este parmetro no tiene ningn valor por de!ecto%
mantenerlo simple 7 usted no &uiere romper la plantilla debido a las cotizaciones de largo conocidas o in!ormacin irrelevante%
mantenerla limpia 7 la descripcin del men se puede aplicar para todas sus opciones de men, pero nos encontramos con una buena idea utilizar esta !uncin
slo para los elementos de men ms importantes, los elementos de men de los dos primeros niveles%
Este parmetro se aplica a todos los sistemas de navegacin$ Men 5((, Moo Men, (plit Men, cable de derivacin de men y Mega Menu.
:mero de columnas
Este parmetro de!ine el nmero de columnas necesarias para mostrar los elementos del men in!antil de un elemento del men principal. >ay algunas cosas &ue usted
siempre debe recordar$
el valor por de!ecto de este parmetro es de % @unoA%
si usted tiene por ejemplo elementos de men H nio, usted tendr &ue ajustar este parmetro en H columnas para el elemento principal de estos elementos del
men%
usted puede crear tantas columnas como necesite en su estructura de navegacin, pero es mejor usar columnas slo para los elementos del men principal0 los de
la ra"z de su men, de esta manera se evitar roturas plantilla%
este parmetro es un parmetro par con opcin +rupo de parmetros%
este parmetro slo se aplica a megamenu sistema de navegacin.
Apcin .rupo
Este grupo de parmetros voluntad la opcin de men padre con sus elementos de men in!antil o elementos de contenido para !ormar columnas compactas. ,ecuerde$
el valor por de!ecto de este parmetro es :o+
&ue slo los grupos del elemento padre, con sus elementos secundarios directos @E+$ padres de nivel % con child8, childD, ... childn de nivel ,(+
este parmetro es un parmetro par de Bmero de columnas de parmetros%
este parmetro slo se aplica a megamenu sistema de navegacin.
Anc5o 4u7men
Este parmetro anula el ancho de toda el rea de contenido in!antil. -lgo de in!ormacin sobre este parmetro$
Este parmetro no tiene ningn valor por de!ecto%
este parmetro debe ser utilizado para los elementos del men principal y aplica al rea de contenido in!antil, sin importar el nmero de columnas %
Este parmetro es til para una sola columna de elementos secundarios, especialmente para los di!erentes tipos de mdulos &ue tienen un valor de anchura mayor
&ue el ancho de columna predeterminado de DEE p"'eles de publicidad especial o%
este parmetro slo se aplica a megamenu sistema de navegacin.
Anc5o de columna 4u7men
Este parmetro anula el ancho de columna predeterminado de DEE p"'eles para todas las columnas. .or lo tanto$
Este parmetro no tiene ningn valor por de!ecto%
este parmetro se utiliza para los elementos del men principal, y se aplica a todos los art"culos in!antiles columnas directos%
este parmetro puede ser til cuando se tiene t"tulos de los elementos de men relativamente largo o simplemente &uieres aadir un to&ue distintivo a su
navegacin%
este parmetro slo se aplica a megamenu sistema de navegacin.
4u7men espec/fico anc5o de columna
Este parmetro anular el ancho predeterminado de DEE p"'eles para una columna espec"!ica o ms.
Este parmetro no tiene ningn valor por de!ecto%
este parmetro se utiliza para los elementos del men principal, y se aplica a art"culos in!antiles columnas directos espec"!icos%
este parmetro es muy til cuando se tiene ms columnas con men distintivo t"tulo elemento longitudes o imgenes de mayor tamao y desea utilizar un ancho
personalizado para ciertas columnas, al igual &ue hemos hecho para el reproductor de v"deo de Coutube%
para cada uno de los elementos secundarios, usted tiene &ue de!inir el ancho utilizando esta variable$ colw8 7 lo &ue signi!ica ancho de la primera columna%
este parmetro slo se aplica a megamenu sistema de navegacin.
Ejemplo?
root_parent 7 )oomla regular* elemento de men,
o c5ild% 7 padres de otros art"culos regulares de men I7J esta es la primera columna
o c5ild, 7 mdulo personalizado con una pancarta DEE'DKEp' I7J esta es la segunda columna.
.ara el elemento de men root_parent vamos a con!igurar el ancho de encargo para la segunda columna, ya &ue es el ancho e'cede el ancho de columna
predeterminado DEEp'. -s" &ue vamos a introducir el valor del parmetro$
colwD L DME
0enga en cuenta &ue los objetos de carga como elementos de men a veces re&uiere el uso de un ancho de columna de 8K7DEp' valor mayor &ue el ancho del objeto.
>emos hecho lo mismo en este ejemplo a&u", para &ue el rea de contenido in!antil envolver alrededor del objeto.
8ategor/a suplementaria estilo
Este parmetro le permitir e'tender el estilo de cada uno de sus elementos de men. -lgunas pautas e ideas$
Este parmetro no tiene ningn valor por de!ecto%
5on este parmetro se puede anular : e'tender el estilo de cada elemento del men, simplemente mediante la creacin de una clase especial de estilo, y lo utilizan
como un valor para este parmetro%
Este parmetro se aplica a todos los sistemas de navegacin.
8ontenido 4u7men
Este parmetro de!ine el comportamiento de un elemento principal o el men in!antil en trminos de carga de contenido adicional. En este momento usted tiene tres
opciones$
Elemento de men para ni3os
esta es la opcin por de!ecto para el parmetro de contenido infantil+
esta opcin de!inir el comportamiento del men como )oomla regular* elemento de men%
el signi!icado de esta opcin es &ue el elemento de men se cargar ningn contenido adicional, adems, no se cargar ningn script de este tipo de acciones, al
igual &ue nos gustar"a desactivar la carga de mdulos%
usando esta opcin producir ningn e!ecto en cual&uier sistema de mens, pero el cambio a esta opcin, se desactivar la carga de contenido adicional para el
sistema de navegacin megamenu.
Mdulo :i3o
usando esta opcin le permitir cargar un mdulo por su t"tulo, con otras palabras, si usted !ija su t"tulo del mdulo NBoticias relacionadasN, esto es lo &ue vas a
ver a&u" para la seleccin de mdulos, por lo &ue no hay &ue con!undir esto con mod_moduleBnom7re %
esta opcin slo a!ecta megamenu y permite &ue el primer mtodo de carga de mdulos como elementos de men.
*osicin del mdulo :i3o
usando esta opcin le permitir cargar un mdulo por su posicin nica, con otras palabras, si usted !ija su posicin de mdulo a Nmi posicinN, esto es lo &ue vas
a ver a&u" para la seleccin de posicin del mdulo%
esta opcin slo a!ecta megamenu y permite &ue el segundo mtodo de carga de mdulos como elementos de men.
:otas de parmetros
estos son todos los parmetros megamenu, y dos de ellas (la descripcin del art/culo de men y clase adicional( tambin se aplican a los otros sistemas de
men%
utilizando el sistema de navegacin megamenu, si se establece como :o 45o# el parmetro t/tulo de men para un elemento principal, y :o para .rupo
parmetro de opcin para todos los elementos secundarios de ese elemento padre, se oculta la estructura de mens completa%
antes de introducir los parmetros del men )- .rogramas hubo D parmetros$ la i>Cuierda y la derec5a D % D %0 se utiliza para hacer el rea de contenido
in!antil de un !lotador elemento principal a las porciones &ue muestran hacia la iz&uierda o hacia la derecha, para evitar el rea de contenido de nio !uera la
envoltura de la plantilla, pero ahora, si el ancho del rea de contenido in!antil es muy amplia, el contenido de nio se mueve a la iz&uierda @o derecha en modo
,0=A lo su!iciente como para mostrar el contenido correctamente nio.
:otas finales
(i usted &uiere saber cmo personalizar (istemas de Bavegacin 01, por !avor visite nuestra seccin de documentacin designada .
.ara cual&uier pregunta &ue pueda tener en relacin con el uso o la personalizacin de los (istemas de Bavegacin 01, por !avor sintase libre de hacer en
nuestros !oros .
Ois!rute de desarrollo con 01 )- Marco*