4

I am trying to use a HTML tag in my menu item in order to get a menu like this:

Parent menu

  • My fist submenu is in bold
  • My second submenu is emphasized

If I enter for instance the <strong> tag in the menu title field, it gets stripped out when I save the page.

But if I enter [b]My fist submenu[/b] is in bold, the [b] tag isn't stripped out.

Is there a way to tell Joomla to replace [b] by a <strong> tag?

5 Answers 5

6

You have a few options here.

Option 1 would be to do what @Bakual has recommended. I've never tried using ReReplacer but the extension is developed and maintained by a very popular and well praised developer, therefore it is bound to do the job well.

Option 2:

You could develop a small plugin and targets the menu items and replaces [b] with a <strong> tag using something like this:

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

Option 3

The beloved jQuery method which may I add is not the preferred method however might be the easiest. Something similar to this:

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

Hope this helps

0
10

You could use ReReplacer from NoNumber (http://www.nonumber.nl/extensions/rereplacer) to replace such things on each pageload. However I would not recommend it in this case.

May I suggest a different approach to solve this? In the menu item options, you can set a "Link CSS Style" in the "Link Type" tab. Add there a CSS class and apply the formatting to this class instead. Like add the CSS class bold there and define it in your template CSS file as

.bold {
    font-weight:bold;
}

That should do the trick without needing HTML in your menu item.

2
  • Thanks Bakual! I will have a look at ReReplacer, I am familiar with "Link CSS Style" but it applies to the whole menu item, not to the first three word or so of a menu item (at least as far as I understand it with my restricted knowledge of html). Maybe you know a way of doing it only via CSS (which would great!)...
    – MagTun
    Jul 7, 2014 at 7:32
  • I don't think you can do that with CSS alone then.
    – Bakual
    Jul 7, 2014 at 20:00
3

Have you ever used Maximenu CK? http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578

It has a ton of extra functionality, which you probably won't need, but you can set it to be a stripped style so you can style the css yourself. Anyway, the cool part of this is it allows you to separate menu item text with pipe breaks and it will automatically add a class to the half that comes after the pipes.

My Menu||Item

Then you style the entire thing to match what you want for the "My Menu" section, then you override those styles using the class that's been applied to the "Item" section.

Very useful. Incidently, Maximenu also has mobile menu integration, description fields, and a few other cool options.

Mobile plugin can be found here: http://extensions.joomla.org/extensions/extension-specific/extensions-specific-non-sorted/22662

4
  • Only problem with using this is the user would then have to do lots of styling changes to get it to look like their current menu. This extension may provide the feature that the user wants, however it's such a heavy extension for such a small feature request. It's best only used when one needs a feature rich menu system
    – Lodder
    Jul 7, 2014 at 20:18
  • True, it is a weighty plugin. If you know what you're doing you can strip it down - which is what we do, since we ONLY use it for this pipebreak feature. But you're right, that's not as easy to do if the user's not familiar with it, and it can be annoying to restyle.
    – Faye
    Jul 7, 2014 at 23:13
  • Yes I did build a menu with Maximenu CK but it isn't responsive on mobile the way I want (the reason why I end up choosing dj-menu). Even thought I was able to customize the style of dj-menu, I wouldn't have the skills to strip maximenu down to only keep the only require feature. But anyway, that could be a great solution for anyone else looking for that (and to do more with their menu!)
    – MagTun
    Jul 8, 2014 at 5:23
  • Sounds good - ya gotta go with what works for you! There's a mobile plugin for maxi, I'll include it above for future reference.
    – Faye
    Jul 8, 2014 at 16:01
2

Are you sure you should be using the strong tag?

strong should not be used to make text bold. Ditto the em tag. em is used to apply emphasis (as read) to a piece of text not to render it in an italic font. If what you want is for some of the text of your menu item to appear in a heavier font-weight, then b is a far better choice.

However, to have full control over the content of menu items I can recommend the JBType plugin from Joomla Bamboo; http://www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin

Using it you can simply enter your menu title like:

A menu item with {jb_i}italics{/jb_i}

And the plugin will render the output with em tags.

4
  • Thanks Seth, your right! I will use the b tag but my question wasn't about which tag, but how to force Joomla to render the HTML tag.
    – MagTun
    Jul 8, 2014 at 5:17
  • 1
    Technically, from a web design point of view, it's considered bad form to use the b tag to bold things. It violates the separation of content (HTML) from style (CSS) tenet that underlies modern web design. It's much better to use CSS to create italic or bold text. See w3.org/International/questions/qa-b-and-i-tags for more details.
    – Evan Lynch
    Jul 11, 2014 at 6:02
  • 1
    @EvanLynch While you are technically correct, it's far better than using <strong>. And given that this was the express purpose in html4 (w3.org/TR/html4/index/elements.html) I think it perfectly acceptable and understandable if these tags continue to be used in this way. The same does not apply to <em> and <strong> of course. Don't forget html4 is still perfectly valid and html5 is officially still a draft spec. Jul 11, 2014 at 8:38
  • Seth, I agree. If you're using a tag for the express purpose of making something bold, then the b tag is the better way to go. I'm just saying that in general it's better to use CSS to do this than straight HTML, regardless of which version of HTML one uses.
    – Evan Lynch
    Jul 11, 2014 at 18:52
0

As a pure css solution, you can use nth-of-type() to target the submenu items.

For my local test, these selectors worked for me:

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

My screenshot shows that:

  • The first submenu is bold
  • The second submenu is italic
  • The third submenu has no custom style applied

These selectors may or may not work "right out of the box" for your project -- results may vary depending on your menu structure and intended styling for other submenus. Just use your browser's developer tools to inspect elements and determine the right classes and hierarchy to target the desired elements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.