No me aparecen los menús en la casilla de Asignación de menú

[burbujitas]

Hola a todos,

Después de realizar unos efectos jQuery con menús, tengo un problema.

No puedo elegir los menús (en "Asignación de menús" cuando creamos/editamos un módulo para decirle a Joomla donde queremos que aparezca o no en el sitito web).

Estos menús no aparecen porque no los tengo creados en Joomla, los he creado dentro de un módulo personalizado HMTL (una lista li) y luego desde CSS le he dado he estilo y luego he creado un archivo JavaScript (.js) para darle comportamiento.

Para que pudieran aparecer en la casilla de "Selección de menú:" tendría que coger el selector/div del menú que crea Joomla, pero no tengo ni idea.

¿Alguien me puede ayudar con eso? Al menos un link con las documentación de nombres que asigna Joomla a esos menús.

Gracias a todos

Saludos cordiales.

[hefesto]

Me temo que es mucho más complicado que eso. Joomla! usa la estructura de menús para mucho más que crear los módulos de menú y mostrarlos; fundamentalmente, para definir una estructura de navegación, y para determinar qué extensiones se mostrarán en una página determinada.

La única solución que se me ocurre en este momento es que crees la una estructura de menú idéntica a la que has programado, y uses las urls de esta estructura para moverte por tu web, aunque de cara al diseño uses el módulo que has creado.

Lo mejor de Joomla! es la cantidad de extensiones que hay disponibles, que te permiten implementar casi cualquier funcionalidad simplemente configurando una serie de parámetros y personalizando es aspecto, en lugar de tener que programarlo todo. Si lo vas a programar todo, ¿para qué usar Joomla!?

[burbujitas]

Hola,

eso es lo que tengo que hacer, crear una estructura de menú idéntica a la programada en el módulo html y borrar lo que hay ahí, vale hasta ahí bien, eso es para poder moverme por el sitio con urls con normalidad. Es lo que no puedo hacer ahora.

Pero mi pregunta es ¿ una vez creada la estructura del menú en Joomla, como identifico cada elemento del menú ? para pasárselo a jquery, porque lo que quiero es que cuando esté sobre el elemento 1 se mueva una imagen que tengo en un módulo, cuándo esté sobre el elemento 2 lo mismo y así sucesivamente.

Sí se que hay muchos plugins y módulos que hacen muchas cosas, unos non-commercial y otros commercial.


El asunto es que yo quiero saber como trabaja todo y hacer las cosas que yo quiero en Joomla, sin tener que estar dependiendo de extensiones de terceros, aunque eso sea inevitable a veces, pero creo que este no es el caso.

Tiene que ser algo muy sencillo seguro.

Muchísimas gracias por tu ayuda.

Saludos

[hefesto]

Mmmmm... no sé si esto es lo que dices, pero cuando creas un elemento de menú en el gestor de menús del backend de Joomla! se le asigna un ItemID único, que es el que lo identifica unívocamente y se usa para determinar qué extensiones se mostrarán cuando ese ItemID sea el activo. Si te fijas, cuando colocas el ratón encima de cualquiera de los elementos de menú, la URL a la que apunta contiene al final (o cerca) un trozo que dice "&ItemID=xx", donde xx es el número que identifica a dicho elemento de menú.

Si lo que quieres es que al pasar el ratón sobre el elemento se produzca una acción en otro sitio, lo suyo es que apliques javascript, que parece que lo dominas.

De cualquier forma, te recomiendo que le eches un vistazo a alguno de los módulos de menú de terceros que hay para Joomla!, que seguro que con un poco de "ingeniería inversa" descubres lo que andas buscando. Mira por ejemplo este, que usa jQuery. ¡Viva el software libre!

[burbujitas]

Muchas gracias hefesto,

lo has clavado!

a ese ID me refería,

Pongo el código que utilicé en el módulo html para hacer el efecto del menumendio (ese que cuando pasas el ratón por encima se abre y muestra un icono):

<ul class="efecto">
<li id="efecto1"><a href="index.php?option=com_content&view=article&id=10&Itemid=20">Nosotros</a></li>
<li id="efecto2"><a href="index.php?option=com_content&view=category&layout=blog&id=2&Itemid=21">Blog Multimedia</a></li>
<li id="efecto3"><a href="index.php?option=com_chronocontact&Itemid=22">Empleo</a></li>
<li id="efecto4"><a href="index.php?option=com_content&view=article&id=11&Itemid=23">Contacto</a></li>
</ul>

y luego en una hoja de estilo CSS tengo:

.efecto {
list-style: none;
position: relative;
margin: 0;
padding: 0;

}
.efecto li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 125px;
height: 40px;
margin-right: 0px;
background-image:url(../images/fondo.png);
background-repeat:no-repeat;
}
.efecto a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}

#efecto1 {
background-position:0px 0px;
}
#efecto2 {
background-position:-200px 0px;
}
#efecto3 {
background-position:-400px 0px;
}
#efecto4 {
background-position:-600px 0px;
}

#efecto1.active, #kwick1:hover {
background-position: 0 bottom;
}
#efecto2.active, #kwick2:hover{
background-position: -200px bottom;
}
#efecto3.active, #kwick3:hover {
background-position: -400px bottom;
}
#efecto4.active, #kwick4:hover {
background-position: -600px bottom;
}

#efecto1 a{
background-image:;
background-repeat:no-repeat;
background-position: left 0px;
}

#efecto1 a:hover{
background-position: left -80px;
}

#efecto4 a{
background-image:;
background-repeat:no-repeat;
background-position: right -40px;
}
#efecto4 a:hover{
background-position: right -120px;
}


y luego en un archivo .js tengo este script para el comportamiento:

function mi_funcion(){
$('.efecto').plugin({
duration: 300,
max: 200,
spacing: 0
});
}

$(document).ready(function(){
mi_funcion();
});

Bueno y luego para finalizar claro está que tengo que tener la ruta de la librería en el index.php y la ruta del plugin javascript.

Todo esto funciona como has podido comprobar en el link.

Ahora ya he hecho la estructura del menú en Joomla, lo que tendría que hacer ahora es darle el mismo estilo que al que ya está hecho y pasarle la clase al plugin javascript como está arriba.

¿qué hago? ¿cambio #efecto1 por #el_id_que_crea_Joomla ?

Por ejemplo yo tengo los ID de menú 20, 21 y 23

¿qué pongo #Itemid=20 ? debe de ser algo así no?

Muchas gracias

Saludos

PD: Viva el software libre!

[burbujitas]

sisi es como dice aquí: http://users.tpg.com.au/j_birch/plugins/superfish/#a

$('ul.sf-menu')

ahí es donde me pierdo

lo demás lo entiendo,

las etiquetas <script type="text/javascript"> </script> son para si pones el código jquery dentro del index.php/html y si lo pones dentro de un .js no es necesario ponerlo.

el $(document).ready(function() { es para cargar el código javascript después de que se cargue el DOM

y el .superfish() es el plugin.

Ahí se podría hacer algo para optimizarlo que sería añadiendo non-conflict y cambiando $ por jQuery para que no hubieran conflictos con MooTools. (aunque tb funciona con $ normalmente).

Bueno más o menos entiendo un poco...

lo que no se que poner en $(' ') para aplicarle el nuevo menú.

gracias

[hefesto]

Lo siento burbujitas, pero no termino de entender qué es lo que quieres conseguir . Yo de javascript no sé prácticamente nada (por eso me encantan los módulos que te lo dan hecho ), y me pierdo un poco en tus explicaciones.

Suponiendo que lo único que quieres hacer es aplicarle un estilo determinado a los elementos del menú, sf-menu es una clase css que viene incluida en la hoja de estilos del módulo (descárgatelo y abre el archivo css, y de paso echa un vistazo al resto, que igual te aporta más información). Al aplicarla al elemento ul (de ahí ul.sf-menu) lo aplicas a todo lo que viene dentro por herencia. Así que creo que lo que tienes que hacer es definir las clases que quieres usar en tu hoja de estilos, y eso es lo que tienes que pasarle en el $(' ').

[hefesto]

Por cierto, que aquí tienes un post muy interesante en el que se explica cómo extraer el itemID en una página concreta y usarlo para determinar la clase o el ID css que se usará:

http://toolboxdigital.com/2010/03/advan ... nu-itemid/

La única pega es que está en inglés...

[burbujitas]

Te he liado con lo de javascript.

Lo que quiero saber es como aplicarle estilo css al elemento itemID=20

Solo eso

Gracias y saludos

PD: por lo del inglés no hay problema, si conoces donde se hable de dar estilo a los menus de Joomla, lo agradecería, aunque sea inglés. Si es en chino tampoco pasa nada, ya me he tenido que aprender unos cuantos tips de OPhone, y ahora quiero terminar esto para seguir con BADA que está en koreano pero ya están ofreciendo soporte en ingles, al google.translate no hay nada que se le resista

[hefesto]

Lo que quiero saber es como aplicarle estilo css al elemento itemID=20

¿A toda la página que se genera al cargar ese elemento de menú? Si es esto, en el enlace que te daba en el post anterior tienes todo lo necesario: no tienes más que añadir el código que dan ahí a la etiqueta <body> de tu template (y creo que además tienes que declarar la variable).

¿Sólo al elemento de menú que tiene el enlace que apunta a itemID=20? En ese caso, dado que el menú lo has creado "a mano" simplemente añade el ID correspondiente y crea el estilo, nombrándolo como más te guste. Tu menú es estático, lo creas tú añadiendo un link directo a la URL del item del menú de Joomla que has creado en el backend.

Ahora, si lo que quieres es que se señale el elemento del menú que está activo, me temo que de crear un módulo en PHP no te salva nadie... Imagino que podrás llamar lo que necesites del PHP desde tu script jQuery, pero no te lo recomiendo por seguridad.

Aquí tienes otro sitio en el que te dicen cómo obtener información sobre los menús:

http://www.tutorials2learn.com/2010/05/ ... es-joomla/

[burbujitas]

¿Sólo al elemento de menú que tiene el enlace que apunta a itemID=20? En ese caso, dado que el menú lo has creado "a mano" simplemente añade el ID correspondiente y crea el estilo, nombrándolo como más te guste. Tu menú es estático, lo creas tú añadiendo un link directo a la URL del item del menú de Joomla que has creado en el backend.

Perdona, pero nunca lo he hecho

¿pero puedes poner una demo de como quedaría el código aplicando el estilo al id20?

Saludos

[hefesto]

Cuando has creado el código HTML que muestra el menú, cada elemento del mismo será un <li> de una lista, una celda <td> de una tabla o directamente una imagen <img> (el link que me diste ya no funciona, así que no puedo verlo). Ese código es estático, por lo que lo único que tienes que hacer es que dentro de la etiqueta correspondiente a cada elemento debes poner id="itemID20", id="itemID21", id="itemID22", etc, y después crear esos estilos en tu hoja de estilos (en tu archivo CSS).

Por ejemplo, si usas una lista, en el código HTML que genera el menú en cada elemento tendrías que poner

Code: Select all

<li id="itemIDxx">
<a href="http://www.TUDOMINIO.com/?option=com_content&Itemid=20">
NOMBRE DEL ELEMENTO
</a>
</li>

y después crear en la hoja de estilos los estilos:

Code: Select all

#itemID20{
...
}

#itemID21{
...
}

#itemID22{
...
}

[burbujitas]

Hola,

Te entiendo, pero esa no es mi duda.

Solo necesito dar estilo. El HTML ya lo crea Joomla al igual que el itemID. (yo no he creado el menu a "mano"(desde código))

Ya tengo los menús creados desde el backend, y Joomla le ha dado los id 20, 21 y 22

ahora quiero aplicarle estilo a cada uno por separado.

Saludos y gracias

[hefesto]

¡Ups! Definitivamente hay un fallo de comunicación aquí, al menos en el receptor (o sea, yo) :P.

Yo pensaba que el menú lo generabas usando un módulo "mod_custom", e introduciendo en él el HTML y el Javascript que habías creado. Pero por lo que me dices, en realidad lo has creado usando un módulo mod_mainmenu, ¿no?

Si es así, creo que la cosa es aún más sencilla, ya que Joomla añade directamente una clase "itemxx" a cada elemento del menú, con lo que lo único que tendrías que hacer sería crear las clases item20, item21, item22... en tu hoja de estilos.

Si me dejas ver lo que tienes hecho te puedo decir exactamente el código.

[burbujitas]

Hola hefesto,

Si en realidad la hemos liado

He encontrado algo en este hilo sobre mi duda: http://forum.joomla.org/viewtopic.php?f=466&t=468346

El sitio lo estoy mudando.

Saludos

PD: a ver si con la imagen me explico mejor:

El menú superior de la imagen, es que hice a mano, en un módulo puso el html y luego le di estilo y le apliqué comportamiento.

Bueno el menú de inferior lo hice desde el BackEnd Joomla y lo que me faltaría sería darle el mismo estilo que al de arriba y también darle comportamiento javascript.

[hefesto]

Pues creo que entre ese post y este otro tienes todo lo que necesitas:

http://forum.joomla.org/viewtopic.php?f=466&t=290158

Imagino que para desarrollar tendrás instalado Firebug en tu Firefox (si no es así ya estás tardando ). Comprueba el HTML de los elementos del menú, y verás que a cada uno de ellos se le aplica una clase llamada "itemxx", siendo xx un número de una o dos cifras (o tres si tienes una estructura de menú gigantesca). Lo único que tienes que hacer es crear esas clases una a una en tu archivo css.

[hefesto]

Has editado el mensaje anterior mientras te contestaba :P.

Por lo de darle estilo, en el post que cito en mi mensaje anterior lo tienes todo.

En cuanto a lo de darle comportamiento Javascript, ya te digo que ahí ando un poco pez, y poco puedo ayudarte. A ver si en este artículo de la documentación de Joomla! encuentras un poco de luz:

http://docs.joomla.org/Creating_a_CSS_Drop_down_Menu

Cuando vuelvas a tener el sitio online mándame los datos de login, que si lo veo seguro que te puedo ayudar un poco más. Creo que ya estamos cerca .

[burbujitas]

Si hefesto, ya queda menos

Si que tengo firebug, tanto en Firefox como en Chrome

También he encontrado unas herramientas para debuguear:
http://www.my-debugbar.com/wiki/IETester/HomePage

http://browsershots.org/

https://browserlab.adobe.com/en-us/index.html

Pronto subiré el sitio y te pasaré el link

Si bueno no te preocupes lo lo del comportamiento javascript, es solo pasarle la clase css.
Es más no solo podemos darle comportamiento a través de jQuery sino que también le podemos darle estilo css, pero aún no me he metido con tanto.

Primero tengo que tener bien claro como manejar los selectores de los menús.

Voy a ver lo que está arriba que ya con eso debe de quedar.

Gracias por tu ayuda

Saludos

[hefesto]

Vale, ya veo el sitio.

Como podrás ver, cada elemento del menú creado con el módulo mod_mainmenu de Joomla! es un elemento de lista <li>, y dentro de cada uno automáticamente se añade una clase que hace referencia al ItemID. Por tanto, lo único que tienes que hacer es añadir a tu hoja de estilos las clases:

#menumedio .menu li.item20
#menumedio .menu li.item21
#menumedio .menu li.item22
#menumedio .menu li.item23

Y asignarles los atributos que veas convenientes. Eso en cuanto al CSS

Para gestionarlo con el Javascript, dado que cada <li> tiene su clase propia imagino que podrás identificarlos convenientemente, ¿no? Ya te digo que yo de Javascript ni papa :S.

[burbujitas]

Gracias hefesto,

eso era, pero no sabía y estar ahí combinando es casi como que te toque la lotería.

en jQuery se maneja así:

lo que en CSS = p --> en jQuery es $(/p/) , esto seleccionaría todos los párrafos en el documento.

lo que en CSS = #un-id --> en jQuery es $(/#un-id/) , esto seleccionaría el único elemento en el documento que tiene un ID de un-id.

lo que en CSS = .una-clase --> en jQuery es $(/.una-clase/), esto seleccionaría todos los elementos en el documento que tienen una clase de una-clase.

En mi caso sería algo así --> $(/#menumedio .menu li.item20/) , esto seleccionaría el elemento 20 en el documento.

Muchísimas gracias hefesto por tu ayuda.

Saludos

[hefesto]

¡Genial!

Gracias a ti también. Muchas de las cosas que te he explicado no las tenía del todo claras (de alguna no tenía ni idea), y buscando información para responderte yo también he aprendido bastante. Te agradezco también la última explicación; en algún momento tendré que decidirme a aprender javascript .

Un saludo.

[burbujitas]

uff!, pues sabes qué?

este va a ser el principio de muchos más

porque ha funcionado

Muchas gracias.

Luego lo actualizo.

Saludos