Take the 2-minute tour ×
Joomla Stack Exchange is a question and answer site for Joomla! administrators, users, developers and designers. It's 100% free, no registration required.

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?

share|improve this question

4 Answers 4

up vote 5 down vote accepted

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

share|improve this answer
    
Thanks @Lodder! –  Arone Jul 7 at 13:43

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.

share|improve this answer
    
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!)... –  Arone Jul 7 at 7:32
    
I don't think you can do that with CSS alone then. –  Bakual Jul 7 at 20:00

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

share|improve this answer
    
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 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. –  REactionFaye Jul 7 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!) –  Arone Jul 8 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. –  REactionFaye Jul 8 at 16:01

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.

share|improve this answer
    
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. –  Arone Jul 8 at 5:17
    
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 at 6:02
    
@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. –  Seth Warburton Jul 11 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 at 18:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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