Question

我正在设计一个新网站，但我目前遇到以下问题：

在菜单中，当我打开带有子菜单的页面，然后将没有子菜单的菜单项悬停时，我想显示一个空的灰色条。但我不知道如何做到这一点。要重现此内容，请转到此页面：http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html，然后将鼠标悬停在菜单中的主菜单上。（Home没有子菜单，所以我希望灰色条是空的。）

修改

对不起，我的问题似乎很难理解。让我们再试一次：

在网页http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html上，有一个菜单始终显示当前子菜单，直到您将鼠标悬停在其他子菜单上。这部分已经有效了。

但是当你在家里徘徊时，你仍会看到：“ONTWIKKELING，HOGEDRUK SPUITGIETEN，CNC-NABEWERKING和MONTAGE”。

这些是父“Processen”（它是当前活动的）的子菜单项

因为家里没有任何子菜单项，所以我希望这个栏是空的。

Answer 1

我认为您必须通过javascript执行此操作，.active上有ul，而您li的父母是a的父母.active因此，为了将子标记更改为{{1}}，您可以通过javascript执行此操作。我希望这是有道理的。

Answer 2

如果我理解正确，如果菜单部分没有子菜单，您只想显示下面的灰色栏。

此菜单使用嵌套的UL和LI标签与CSS完成，这是一种非常常见的技术。我应该警告你，你所链接的页面中的效果不能满足你在IE＆lt; 9中的需要。有一些纯CSS菜单示例可以很容易地实现这一目的。

如果你不想（或知道）如何更改它，因为这意味着搞乱Joomla的内部工作，我认为你可以做的是：首先在HOME下的“假”LI中创建一个空的SPAN，然后，在HTML中设置特定的（通过class或id属性）SPAN，宽度等于灰色条。然后将display:block;设置为SPAN。必须在SPAN的父类中发生:hover事件时执行此操作。

例如：如果您将SPAN代码的class设置为 hideme ：

.menumenu li ul li .hideme { width: [width of the grey bar]; }

.menumenu li:hover ul li .hideme { display:block; }

它不漂亮，但它应该有用。

编辑我有正确的想法，但执行错误（早上太早）

您实际需要的是为HOME LI下的假UL提供唯一标识符（即 fakeUL ），在其中嵌套LI以保存SPAN标记，定义该标识的大小具有width属性的SPAN标记，然后CSS可能类似于：

.menumenu li .fakeUL li span { width: [width of the grey bar]; }

.menumenu li:hover .fakeUL li span { display:block; }

Answer 3

我最终在joomla中制作模板覆盖，以便在菜单中插入一个空的ul标签。我认为这将是我最干净的选择。

要使模板覆盖，请将文件\ modules \ mod_mainmenu \ tmpl \ default.php复制到\ templates \ YOURTEMPLATE \ html \ mod_mainmenu \ default.php

然后在您复制的文件中找到此代码：

if (isset($path) && $node->attributes('id') == $path[0]) {
    $node->addAttribute('id', 'current');
} else {
    $node->removeAttribute('id');
}
$node->removeAttribute('rel');
$node->removeAttribute('level');
$node->removeAttribute('access');

然后在它们之前添加这些行。

if (($node->name() == 'li') && !isset($node->ul)) {
    $node->addChild('ul ');
    $node->addChild('/ul');
}

希望我帮助过任何人！

当其他菜单项悬停时，CSS菜单会隐藏当前子菜单

3 个答案: