Creating sublines on Joomla menu items

Question

In my toplevel menu items, I would like to make a subline for each item. I don't think it's possible to do by default, byt YooTheme has done it in many of their templates.

The menu output look like this

<div class="moduletable_menu">
<ul id="mainmenu" class="menu">
    <li class="active item1" id="current">
        <a href="URL_HIDDEN">
            <span>Services</span>
        </a>
    </li>
</ul>

This basically outputs a one line menu item like so:

Services

What I would like to do is have a menu item like this:

Services
Service x, Service y, Service z

For reference, have a look at the main menu on the YooTheme demo page.

The way YooTheme does this, is using two pipes (||) as a linebreak, so in the Joomla backend you type "Services||Service x, Service y, Service z" as the menu title, and then there must be some fancy javascript that breaks this title into two spans, ready to be styled using css.

Does anyone know of an easy way to code this?

Please note that I am looking to build this feature into a custom template (ie. non-yootheme).

Also note that I am not using MooTools, but Jquery instead.

Answer 1

I've been searching a solution for this issue for a long time but couldn't find a simple solution nor could I figure out one by myself. That's why I went for more complex menu system that were massively overpowered for this goal.

Sadly this approach doesn't work for me. With growing despair I tried different positions to place your code snippet but it just didn't do what it supposed to do:( . Maybe you could specify where exact

Answer 2

Thanks for this code -- works great for me. I'm not a programmer and got it to work just fine. I'd like a little enhancement, though -- would it be possible to split a third span, in order to add a tooltip? For instance, to input a string like this into to joomla menu item:

Events//Get tickets{{Tickets for Summer Gala now available!

And get output like this:

    <li class="parent item2">
<a href="YOURURL">
    <span>
        <span class="title">Events</span>
        <span class="sub">Get tickets</span>
        <span class="tooltip">Tickets for Summer Gala now available!</span>
    </span>
</a>

You can probably imagine how this might be useful...