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

Question

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

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

我在这里发现了与我的问题类似的东西：Joomla 如何自定义主菜单但实际上我不知道如何修改代码。现在我有这个 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>

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

score 2 · Accepted Answer

您可以从 Joomla(2.5) 管理部分向任何菜单项添加类。只需在编辑模式下打开菜单项，然后在右侧找到“链接类型选项”选项卡。在那里你可以看到“Link CSS Style”只是把你的css类放在那里。

希望这会帮助你。

score 1 · Accepted Answer

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

从 your_root -> modules -> mod_menu 复制你的 default.php 文件

然后转到 -> 模板 -> your_template_you_are_using -> html 并创建文件夹

mod_menu

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

为方便起见，这里是我的 sidenav.php。您可以看到，如果菜单项嵌套很深，我可以添加子 CSS 选择器。至于设计，你可以随心所欲。Parent<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>

score 1 · Accepted Answer

在 Joomla 中，大部分代码是动态生成的，因此您很难将特定类添加到仅特定菜单中。但是，在您的 css 文件中，您可以使用这样的选择器

.item-125 a {
your css code here
}

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

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

即在一个类中有一个引号会导致它出错。

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

score 1 · Accepted Answer

你可以添加子菜单

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');

 });
});

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

4 回答 4

Related

Reference