web-dev-qa-db-fra.com

Utiliser une balise HTML pour mettre en gras seulement quelques mots d'un élément de menu

J'essaie d'utiliser une balise HTML dans mon élément de menu afin d'obtenir un menu comme celui-ci:

Menu parent

  • mon premier sous-men est en gras
  • Mon deuxième sous-menu est souligné

Si j'entre par exemple la balise <strong> Dans le champ du titre du menu, elle est supprimée lorsque je sauvegarde la page.

Mais si j'entre [b]My fist submenu[/b] is in bold, La balise [b] N'est pas supprimée.

Existe-t-il un moyen de dire à Joomla de remplacer [b] Par une balise <strong>?

joomla-3.xmenu-item
4
MagTun

Vous avez quelques options ici.

Option 1 serait de faire ce que @Bakual a recommandé. Je n'ai jamais essayé d'utiliser ReReplacer, mais l'extension est développée et maintenue par un développeur très populaire et très apprécié, elle est donc tenue de bien faire le travail.

Option 2:

Vous pourriez développer un petit plugin et cibler les éléments de menu et remplacer [b] avec un <strong> tag en utilisant quelque chose comme ceci:

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

Option

La méthode jQuery bien-aimée que je peux ajouter n’est pas la méthode préférée cependant pourrait être la plus simple. Quelque chose de semblable à ceci:

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

J'espère que cela t'aides

6
Lodder

Vous pouvez utiliser ReReplacer à partir de NoNumber ( http://www.nonumber.nl/extensions/rereplacer ) pour remplacer ces éléments à chaque chargement de page. Cependant, je ne le recommanderais pas dans ce cas.

Puis-je suggérer une approche différente pour résoudre ce problème? Dans les options des éléments de menu, vous pouvez définir un "Style de lien CSS" dans l'onglet "Type de lien". Ajoutez-y une classe CSS et appliquez le formatage à cette classe à la place. Par exemple, ajoutez la classe CSS bold et définissez-la dans le fichier CSS de modèle comme

.bold {
    font-weight:bold;
}

Cela devrait faire l'affaire sans avoir besoin de HTML dans votre élément de menu.

10
Bakual

Avez-vous déjà utilisé Maximenu CK? http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578

Il a une tonne de fonctionnalités supplémentaires, dont vous n’aurez probablement pas besoin, mais vous pouvez le définir comme un style dépouillé pour que vous puissiez styler vous-même le css. Quoi qu’il en soit, la partie la plus intéressante de ce logiciel est qu’elle vous permet de séparer le texte d’un élément de menu avec des ruptures de tuyaux et que cela ajoutera automatiquement une classe à la moitié qui suit les tuyaux.

Mon menu || Article

Ensuite, vous créez un style qui correspond à ce que vous souhaitez pour la section "Mon menu", puis vous substituez ces styles à l'aide de la classe qui a été appliquée à la section "Elément".

Très utile. Incidemment, Maximenu a également une intégration de menu mobile, des champs de description et quelques autres options intéressantes.

Le plugin mobile peut être trouvé ici: http://extensions.joomla.org/extensions/extension-specific/extensions-specific-non-sorted/22662

3
Faye

Êtes-vous sûr que vous devriez utiliser la balise strong?

strong ne devrait pas être utilisé pour mettre du texte en gras. Idem la balise em. em est utilisé pour appliquer l'emphase (comme lu) à un morceau de texte et non pour le rendre dans une police en italique. Si vous voulez que le texte de votre élément de menu apparaisse avec une police plus épaisse, alors b est un bien meilleur choix.

Cependant, pour avoir un contrôle total sur le contenu des éléments de menu, je peux recommander le plugin JBType de Joomla Bamboo; http://www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin

En l'utilisant, vous pouvez simplement entrer le titre de votre menu comme:

Un élément de menu avec {jb_i} italique {/ jb_i}

Et le plugin rendra la sortie avec les balises em.

2
Seth Warburton

En tant que solution CSS pure, vous pouvez utiliser nth-of-type() pour cibler les éléments de sous-menu.

Pour mon test local, ces sélecteurs ont fonctionné pour moi:

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

Ma capture d'écran montre que:

  • Le premier sous-menu est gras
  • Le deuxième sous-menu est en italique
  • Le troisième sous-menu n'a pas de style personnalisé appliqué

Ces sélecteurs peuvent ou non fonctionner "immédiatement" pour votre projet - les résultats peuvent varier en fonction de la structure de votre menu et du style souhaité pour les autres sous-menus. Utilisez simplement les outils de développement de votre navigateur pour inspecter les éléments et déterminer les classes et la hiérarchie appropriées pour cibler les éléments souhaités.

0
mickmackusa