Question

我正在使用不支持子菜单的Twitter Bootstrap 3。所以为了实现这个，我发现了这个很酷的插件： https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

但问题是我必须修改菜单渲染，以便将特殊类添加到“a”标记，该标记在父子菜单项下。

我在这里找到了与我的问题相似的内容：Joomla How to customize main menu 但实际上我没有任何想法如何修改代码。现在我有了这个html输出：

<div class="moduletable"> <ul class="nav menu nav-pills nav-justified"> <li class="item-110 current active"><a href="/" >First</a></li> <li class="item-111"><a href="/" >Second</a></li> <li class="item-112 dropdown"><a href="/" >third</a> <ul class="dropdown-menu"> <li class="item-127"><a href="/" >Sub first</a></li> <li class="item-128"><a href="/" >Sub second</a></li> </ul> </li> <li class="item-113"><a href="" >Third</a></li> <li class="item-116"><a href="" >Fourth</a> <ul class="dropdown-menu"> <li class="item-125"><a href="/" >Last</a></li> </ul> </li> </ul> </div>

我需要得到：

<div class="moduletable"> <ul class="nav menu nav-pills nav-justified"> <li class="item-110 current active"><a href="/" >First</a></li> <li class="item-111"><a href="/" >Second</a></li> <li class="item-112 dropdown"><a href="" >third</a> <ul class="dropdown-menu"> <li class="item-127"><a class="data-toggle="dropdown" data-hover="dropdown" data-delay="1000" href="/" >Sub first</a></li> <li class="item-128"><a class="data-toggle="dropdown" data-hover="dropdown" data-delay="1000" href="/" >Sub second</a></li> </ul> </li> <li class="item-113"><a href="" >Third</a></li> <li class="item-116"><a href="" >Fourth</a> <ul class="dropdown-menu"> <li class="item-125"><a class="data-toggle="dropdown" data-hover="dropdown" data-delay="1000" href="/" >Last</a></li> </ul> </li> </ul> </div>

P.S。实际上我不想使用jQuery。最好覆盖菜单渲染。

Answer 1

您可以将类添加到Joomla（2.5）管理部分中的任何菜单项。只需在编辑模式下打开菜单项，然后在右侧找到“链接类型选项”选项卡。在那里你可以看到“链接CSS样式”，只需将你的css课程放在那里。

希望这会对你有所帮助。

Answer 2

如果我正确理解您的问题，您希望修改sidenav的菜单布局。

从your_root复制default.php文件 - ＆gt;模块 - ＆gt; mod_menu

然后转到 - ＆gt;模板 - ＆gt; your_template_you_are_using - ＆gt; html并创建文件夹

mod_menu

在该文件夹中粘贴default.php和普通的index.html文件（出于安全目的）。现在，您可以继续为菜单模块创建单独的备用布局。（请注意，在模块管理器中，您需要选择备用布局，否则它将呈现默认布局）。

为方便起见，这里是我的sidenav.php。如果菜单项是深层嵌套的，你可以看到我可以添加子css选择器。至于设计，你可以做任何你想做的事。父<ul class="nav etc...">...</ul>可以使用其他可以使用插件的css选择器。

<?php

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>
<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="nav nav-list bs-sidenav <?php echo $class_sfx;?>"<?php
    $tag = '';
    if ($params->get('tag_id') != null)
    {
        $tag = $params->get('tag_id').'';
        echo ' id="'.$tag.'"';
    }
?>>
<?php
foreach ($list as $i => &$item) :
    $class = 'item-'.$item->id;
    if ($item->id == $active_id) {
        $class .= ' current';
    }

    if (in_array($item->id, $path)) {
        $class .= ' active';
    }
    elseif ($item->type == 'alias') {
        $aliasToId = $item->params->get('aliasoptions');
        if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) {
            $class .= ' active';
        }
        elseif (in_array($aliasToId, $path)) {
            $class .= ' alias-parent-active';
        }
    }

    if ($item->deeper) {
        $class .= ' deeper';
    }

    if ($item->parent) {
        $class .= ' parent';
    }

    if (!empty($class)) {
        $class = ' class="'.trim($class) .'"';
    }

    echo '<li'.$class.'>';

    // Render the menu item.
    switch ($item->type) :
        case 'separator':
        case 'url':
        case 'component':
            require JModuleHelper::getLayoutPath('mod_menu', 'sidenav_'.$item->type);
            break;

        default:
            require JModuleHelper::getLayoutPath('mod_menu', 'sidenav_url');
            break;
    endswitch;

    // The next item is deeper.
    if ($item->deeper) {
        echo '<ul class="nav-child unstyled small">';
    }
    // The next item is shallower.
    elseif ($item->shallower) {
        echo '</li>';
        echo str_repeat('</ul></li>', $item->level_diff);
    }
    // The next item is on the same level.
    else {
        echo '</li>';
    }
endforeach;
?></ul>

Answer 3

在Joomla中，大多数代码都是动态生成的，因此将特定类添加到特定菜单中会有点困难。但是，在您的css文件中，您可以使用这样的选择器

.item-125 a {
your css code here
}

并且您在第二个代码中使用了错误的属性。

 class="data-toggle="drop-down"

即类中有引号会导致错误。

如果你想将该属性添加到所有菜单，然后打开模板文件，可能是index.php或打开模板文件夹中的html文件夹，在那里你会找到一个名为header.php或menu.php的文件。编辑它，您就可以添加属性。如果那令人困惑，那么粘贴代码在这里，我将引导你完成

Answer 4

您可以添加子菜单

http://forum.joomla.org/viewtopic.php?f=725&p=3038108

我希望这个帖子可以帮到你。

在index.php

的末尾添加以下代码

jQuery(document).ready(function($){
 $(function() {

// add dropdown to the list element that contains first dropdown list
$('ul.nav.menu > li.parent').addClass('dropdown');
// add dropdown-toggle, data-toggle and disabled to the main dropdown <a> (allows it to work                      correctly on the ipad, requiring a rollover to show the menu
$('ul.nav.menu > li.parent > a').addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('disabled', '');
// adds dropdown-menu to the first dropdown (basically the whole first menu)
$('ul.nav.menu > li.parent > ul.nav-child').addClass('dropdown-menu');
// add dropdown-submenu to the list element that contains the submenu (this adds the arrow to the element)
$('ul.nav-child > li.parent').addClass('dropdown-submenu');
// add dropdown menu to the submenu ul (basically the whole other menu) and style it with nav-child-sub
$('ul.nav-child > li.parent > ul.nav-child').addClass('dropdown-menu').removeClass('nav-child').addClass('nav-child-sub');

 });
});

Joomla 3：如何将类添加到特定的链接元素

4 个答案: