javascript - 在 Joomla 菜单项上创建子行

Question

在我的顶级菜单项中，我想为每个元素创建一个子行。我认为默认情况下不可能这样做，byt 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>

这基本上输出了一个像这样的单行菜单项:

Services

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

Services
Service x, Service y, Service z

作为引用，请查看 YooTheme demo page 上的主菜单.

YooTheme 这样做的方式是使用两个竖线 (||) 作为换行符，因此在 Joomla 后端您键入“服务||服务 x、服务 y、服务 z”作为菜单标题，然后必须是一些花哨的 javascript，将这个标题分成两个范围，准备好使用 css 设置样式。

有谁知道编写此代码的简单方法吗？

请注意，我希望将此功能构建到自定义模板(即非 yootheme)中。

另请注意，我没有使用 MooTools，而是使用 Jquery。

Answer 1

我终于弄明白了，我想我会分享它，如果有人需要的话。

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

接下来，打开覆盖文件 (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 中更改它。 我使用了双斜线，因为它很容易输入。