Home/ Questions/Q 861897
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T09:03:12+00:00

In my toplevel menu items, I would like to make a subline for each

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I finally figured this out, and thought I’d share it, if anyone else needs this.

    First of all you need to create a template override for the mod_mainmenu.

    Next, open up the override file (default.php) and insert this peice of code after the last IF:

    // add title & sub span
if (isset($node->_children[0]) && isset($node->_children[0]->span[0])) {
    $title = $node->_children[0]->span[0];
    $split = explode('//', $title->data(), 2);
    if (count($split) == 2) {
        $span =& $node->_children[0]->span[0]->addChild('span', array('class' => 'title'));
        $span->setData(trim($split[0]));
        $span =& $node->_children[0]->span[0]->addChild('span', array('class' => 'sub'));
        $span->setData(trim($split[1]));
    }
}

    Now you can type a subline in your menuitem title field, you just need to put // as a delimiter.
    Example: Lorem Ipsum//Dolor sit amet

    The outputted html looks like this:

    <li class="parent item2">
<a href="YOURURL">
    <span>
        <span class="title">Lorem Ipsum</span>
        <span class="sub">Dolor sit amet</span>
    </span>
</a>

    This can now be styled with css.

    Happy days! 🙂

    TIP! You can choose whatever delimiter you like, just make sure to change it in the default.php.
    I went with the double slash, as it’s easy to type.

    • 0