0

I'm designing a new website, but I currently have the following problem:

In the menu, when the I open a page with a sub menu, and then hover a menu item without sub menu I want to display an empty gray bar. But I've got no clue how to do this. To reproduce this go to this page: http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html and then hover over the home item in the menu. (Home has no sub menu, so I want the gray bar to be empty.)

Edit

I'm sorry, my question seems to be quite hard to understand. Lets try again:

On the web page http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html there is a menu which is always displays the current sub menu, until you hover a different sub menu. This part is already working.

But when you hover Home, you will still see:"ONTWIKKELING, HOGEDRUK SPUITGIETEN, CNC-NABEWERKING and MONTAGE".

These are the sub menu items of the parent "Processen" (which is the current active one)

Because home does not have any sub menu items, i want this bar to be empty instead.

4

3 回答 3

0

我最终在 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');
}

希望我帮助了任何人！

于 2013-05-17T08:05:01.500 回答
0

我认为你必须通过 javascript 来做到这一点，你有你.active，ul那是你的父母li，你的父母是你的父母，a所以为了改变子标签来显示，就像.active你通过 javascript 做的那样。我希望这是有道理的。

于 2013-04-25T09:10:25.023 回答
0

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

这个菜单是用 CSS 的嵌套 UL 和 LI 标签完成的，这是一种非常常见的技术。不过，我应该警告您，您链接的页面中的效果在 IE <9 中无法满足您的需求。有一些纯 CSS 菜单示例可以很容易地实现此目的。

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

例如：如果您将classSPAN 标记设置为hideme：

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

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

它不漂亮，但它应该工作。

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

您真正需要的是在 HOME LI（即fakeUL）下为假 UL 提供唯一标识符，在其中嵌套一个 LI 以保存 SPAN 标签，使用width属性定义该 SPAN 标签的大小，然后定义 CSS可能是这样的：

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

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

于 2013-04-25T09:18:39.727 回答