Joomla：如何在浏览单独的子菜单项时保持主菜单项突出显示？

发布于 2024-11-16 20:25:08 字数 144 浏览 7 评论 0原文

我正在尝试制作一个水平的“类别”主菜单和一个与主菜单分开的垂直子菜单。当我选择一个类别时，会显示其主页。但是，当我从子菜单中选择另一个页面时，该页面应该来自同一类别，然后主菜单中的“类别”项将停止突出显示。所有菜单都定义为“独立”模块，我使用的是 Joomla 1.6.3。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

方觉久 2024-11-23 20:25:08

任何类型的突出显示或效果都基于 CSS 类，这些类是在创建菜单时通过 XML 分配的。如果您将每个菜单分开而不是一个大的层次结构，您可能会遇到问题。您的菜单结构应使用层次结构在一个模块中制作。

如果我们查看 Joomla 1.6 演示页面：hhttp://demo16.cloudaccess.net/index.php/using-joomla/extensions 我们可以看到“Using Joomla!”是父级，“使用扩展是子级”。让我们看看分配给

每个链接的 CSS 类

使用 Joomla - class="active Deep Parent"
使用扩展 - class="当前活动的深层父级"

然后，您可以根据层次结构使用 CSS Javascript 控制格式，例如

 li.parent li.current { CSS here } //根据当前做事
 li.active li.active { css here } // 为层次结构中的每个级别添加一个 .active，例如要影响 3 种方式，需要在层次结构选择器中使用三个 li.active

例如，以下是该页面上使用的一些 CSS 规则：

ul.menu li.active a:link, ul.menu li.active a:visited { 
    颜色：#333333；
}

ul.menu li.active ul li.active a:link, ul.menu li.active ul li.active a:visited { 
     边框底部颜色：#ffffff；
     边框底部样式：实心；
     边框底部宽度：1px；
     左边框颜色：当前颜色；
     左边框样式：无；
     左边框宽度：0px；
     右边框颜色：当前颜色；
     右边框样式：无；
     右边框宽度：0px；
     边框顶部颜色：当前颜色；
     顶部边框样式：无；
     顶部边框宽度：0px；
     颜色：#333333；
 }

如果您没有使用一个大菜单来处理所有内容，那么父项将不会添加正确的 CSS 类，您将不得不执行更复杂的 JavaScript。

Any type of highlighting or effect is based upon CSS classes which are assigned in the creation of the menu via XML. If you have each menu as separate instead of one large hierarchy you may run into problems. Your menu structure should be made in one module using hierarchy.

If we look at the Joomla 1.6 demo page at: hhttp://demo16.cloudaccess.net/index.php/using-joomla/extensions We can see that "Using Joomla!" is the parent and "Using Extensions is the child". Let's look at the CSS classes assigned to the

for each of those links

Using Joomla - class="active deeper parent"
Using Extensions - class="current active deeper parent"

You can then control formatting using CSS Javascript based upon the hierarchy like

 li.parent li.current { CSS here } //do things based on the current
 li.active li.active { css here } // add an .active for each level down the hierarchy, for example to affect 3 ways in, require three li.actives in the hierarchical-selector

For example here are some the CSS rules being used on that page:

ul.menu li.active a:link, ul.menu li.active a:visited { 
    color: #333333;
}

ul.menu li.active ul li.active a:link, ul.menu li.active ul li.active a:visited { 
     border-bottom-color: #ffffff;
     border-bottom-style: solid;
     border-bottom-width: 1px;
     border-left-color: currentColor;
     border-left-style: none;
     border-left-width: 0px;
     border-right-color: currentColor;
     border-right-style: none;
     border-right-width: 0px;
     border-top-color: currentColor;
     border-top-style: none;
     border-top-width: 0px;
     color: #333333;
 }

If you are not using one large menu for everything, then the parent items will not have the correct CSS classes added and you will have to do more complex javascript.

回复收藏 0 原文