Creating sublines on Joomla menu items

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 wa开发者_开发技巧y 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.

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.

This worked for Joomla 3.2

Create an override in your template: For example: templates/beez_20/html/mod_menu/default_component.php and use the following code:

// No direct access.
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="'.$item->anchor_css.'" ' : '';
$title = $item->anchor_title ? 'title="'.$item->anchor_title.'" ' : '';

if ($item->menu_image) {
      $item->params->get('menu_text', 1 ) ? 
      $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" /><span class="image-title">'.$item->title.'</span> ' :
      $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" />';
} 
else { $linktype = $item->title;
}

$ta=explode('~',$linktype);  /////////////////////////// 3 new lines here
$linktype=$ta[0];
$subtitle=$ta[1];

switch ($item->browserNav) :
   default:
   case 0:
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
      break;
   case 1:
      // _blank
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
      break;
   case 2:
   // window.open
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a>
<?php
      break;
endswitch;

if ($subtitle!=null) {    /////////////////////////// 4 new lines here
  echo '<div style="margin-top:0px;margin-bottom:10px;margin-left:15px;font-style:italic;"><small>'.$subtitle.'</small></div>';
}

Write menu text as header~subheader