it-swarm-es.tech

Use la etiqueta HTML para poner en negrita solo algunas palabras de un elemento de menú

Estoy tratando de usar una etiqueta HTML en mi elemento de menú para obtener un menú como este:

Menú principal

  • Mi submenú de puño está en negrita
  • Mi segundo submenú está enfatizado

Si entro por ejemplo el <strong> etiqueta en el campo de título del menú, se elimina cuando guardo la página.

Pero si entro [b]My fist submenu[/b] is in bold, el [b] la etiqueta no se elimina.

¿Hay alguna manera de decirle a Joomla que reemplace [b] por un <strong> etiqueta?

4
MagTun

Tienes algunas opciones aquí.

Opción 1 sería hacer lo que @Bakual ha recomendado. Nunca he intentado usar ReReplacer, pero la extensión es desarrollada y mantenida por un desarrollador muy popular y bien elogiado, por lo tanto, seguramente hará el trabajo bien.

Opción 2:

Puede desarrollar un pequeño complemento y apuntar a los elementos del menú y reemplazar [b] con un <strong> etiqueta usando algo como esto:

$item = //code to get menu items
$tag = array(
    '/\[b\](.*?)\[\/b\]/is',
);
$replace = array(
    '<strong>$1</strong>',
);
$output = preg_replace($tag, $replace, $item);

Opción

Sin embargo, el querido método jQuery que puedo agregar no es el método preferido podría ser el más fácil. Algo similar a esto:

$('.nav li a').html(function (i, html) {
     return html.replace(/(\w+\s\w+\s\w+)/, '<strong>$1</strong>')
});

Espero que esto ayude

6
Lodder

Puede usar ReReplacer de NoNumber ( http://www.nonumber.nl/extensions/rereplacer ) para reemplazar esas cosas en cada carga de página. Sin embargo, no lo recomendaría en este caso.

¿Puedo sugerir un enfoque diferente para resolver esto? En las opciones del elemento de menú, puede establecer un "Estilo CSS de enlace" en la pestaña "Tipo de enlace". Agregue allí una clase CSS y aplique el formato a esta clase. Como agregar la clase CSS bold allí y definirla en su archivo CSS de plantilla como

.bold {
    font-weight:bold;
}

Eso debería hacer el truco sin necesidad de HTML en su elemento de menú.

10
Bakual

¿Alguna vez has usado Maximenu CK? http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578

Tiene una tonelada de funcionalidad adicional, que probablemente no necesitará, pero puede configurarlo para que sea un estilo despojado para que pueda diseñar el CSS mismo. De todos modos, lo bueno de esto es que le permite separar el texto del elemento del menú con saltos de tubería y agregará automáticamente una clase a la mitad que viene después de las tuberías.

Mi menú || Artículo

Luego, diseña todo para que coincida con lo que desea para la sección "Mi menú", luego anula esos estilos utilizando la clase que se ha aplicado a la sección "Elemento".

Muy útil. Incidentalmente, Maximenu también tiene integración de menú móvil, campos de descripción y algunas otras opciones interesantes.

El complemento móvil se puede encontrar aquí: http://extensions.joomla.org/extensions/extension-specific/extensions-specific-non-sorted/22662

3
Faye

¿Está seguro de que debería usar la etiqueta strong?

strong no debe usarse para poner el texto en negrita. Lo mismo ocurre con la etiqueta em. em se usa para aplicar énfasis (como leído) a un fragmento de texto no para representarlo en letra cursiva. Si lo que desea es que parte del texto de su elemento de menú aparezca en una fuente más pesada, entonces b es una opción mucho mejor.

Sin embargo, para tener un control total sobre el contenido de los elementos del menú, puedo recomendar el complemento JBType de Joomla Bamboo; http://www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin

Utilizándolo, simplemente puede ingresar el título de su menú como:

Un elemento de menú con {jb_i} cursiva {/ jb_i}

Y el complemento representará la salida con etiquetas em.

2
Seth Warburton

Como una solución CSS pura, puede usar nth-of-type() para apuntar a los elementos del submenú.

Para mi prueba local, estos selectores funcionaron para mí:

li.deeper > ul.nav-child > li.deeper:nth-of-type(1) > a {
    font-weight: bold;
}

li.deeper > ul.nav-child > li.deeper:nth-of-type(2) > a {
    font-style: italic;
}

enter image description here

Mi captura de pantalla muestra que:

  • El primer submenú está en negrita.
  • El segundo submenú es cursiva.
  • El tercer submenú no tiene un estilo personalizado aplicado

Estos selectores pueden o no funcionar "directamente" para su proyecto; los resultados pueden variar según la estructura de su menú y el estilo previsto para otros submenús. Simplemente use las herramientas de desarrollador de su navegador para inspeccionar elementos y determinar las clases y la jerarquía correctas para apuntar a los elementos deseados.

0
mickmackusa