在 Joomla 菜单项上创建子行答案

【问题标题】：Creating sublines on Joomla menu items在 Joomla 菜单项上创建子行
【发布时间】：2010-05-20 09:25:46
【问题描述】：

在我的顶级菜单项中，我想为每个项目创建一个子行。我认为默认情况下不可能这样做，YooTheme 在他们的许多模板中都这样做了。

菜单输出如下所示

<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>

这基本上输出一个单行菜单项，如下所示：

服务

我想做的是有一个这样的菜单项：

服务
服务 x、服务 y、服务 z

作为参考，请查看YooTheme demo page 上的主菜单。

YooTheme 这样做的方式是使用两个管道 (||) 作为换行符，所以在 Joomla 后端你输入“Services||Service x, Service y, Service z”作为菜单标题，然后必须是一些花哨的 javascript，将这个标题分成两个跨度，准备好使用 css 设置样式。

有没有人知道一个简单的编码方法？

请注意，我希望将此功能构建到自定义模板中（即非 yotheme）。

另外请注意，我使用的不是 MooTools，而是 Jquery。

【问题讨论】：

它们不是在管理面板菜单部分的描述/子文本等中设置吗？

标签： javascript jquery css menu joomla

【解决方案1】：

我终于想通了，我想我会分享它，如果其他人需要这个。

首先你需要为 mod_mainmenu 创建一个template override。

接下来，打开覆盖文件（default.php）并在最后一个 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]));
    }
}

现在您可以在菜单项标题字段中键入子行，您只需将 // 作为分隔符。示例：Lorem Ipsum//Dolor sit amet

输出的 html 如下所示：

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

现在可以使用 css 设置样式。

快乐的日子！ :)

提示！您可以选择任何您喜欢的分隔符，只要确保在 default.php 中更改它即可。我选择了双斜线，因为它很容易输入。

【讨论】：

谢谢你的代码，但我找不到应该放置代码的地方，你能在我应该粘贴核心文件的代码之后写一小段代码吗？

【解决方案2】：

这适用于 Joomla 3.2

在您的模板中创建一个覆盖：例如：templates/beez_20/html/mod_menu/default_component.php 并使用以下代码：

// 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>';
}

将菜单文本写为标题~子标题

【讨论】：