7

我有一个基本菜单，一些菜单项有子菜单。我对 wordpress 的经验很少，现在没有时间深入研究细节。所以我的问题是，当用户导航到其中一个子菜单页面时，突出显示顶部菜单项的最简单方法是什么。（我尝试同时使用 javascript 和纯 css 来通过元素 id 和使用“current-cat-parent”类来设置颜色属性，但都没有工作）。
任何帮助是极大的赞赏。

注意：我正在使用一个名为 chameleon 的主题。

4

7 回答 7

11

您可以将 current-menu-item 类分配给 .current-menu-ancestor 类，例如

.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
    color: #777777 !important; /* highlight color */
}

它将突出显示父页面菜单

请参考这个页面

于 2013-03-30T08:39:07.140 回答
3

您可以在主题的 footer.php 文件中插入以下代码，就在结束 body 标记之前。

<!-- Highlight parent page link when on child page -->
<?php if (is_page()) {   //  displaying a child page ?>
    <script type="text/javascript">
        jQuery("li.current-page-ancestor").addClass('current-menu-item');
    </script>
<?php } ?>

这样做的美妙之处在于它在 PHP 中，因此代码是动态的。它所做的只是添加另一个原生 WordPress nav li 类，使当前页面的链接处于活动状态。

我在这里写了一篇简短的文章来解释它是如何工作的：查看子/子页面时如何保持父页面导航链接突出显示！

如果您对此有任何疑问，请随时告诉我。

于 2015-02-18T14:38:10.393 回答
3

有趣的。您的解决方案突出显示了父级，但没有突出显示当前的子级。但这让我走上了正确的道路，最终，这就是我所需要的。

li.current-menu-parent >a, .current-menu-item >a {
    color: red !important;
}
于 2017-06-13T15:49:05.497 回答
3

我在编辑它时遇到了一点问题，但找到了一个简单的解决方案。我正在使用 Wordpress Storefront 主题，只需将其粘贴到您的子主题style.css文件中：

li.current-menu-parent >a {
  color:red !important;
}
于 2016-04-19T16:41:29.037 回答
1

WordPress 5.7

测试和工作，2021

2021 年。如果你们中的任何人仍在寻找解决方案，那么就在这里。

这将突出显示父母及其孩子。如果没有子菜单，则父菜单将突出显示。记住!important是必需的。

.current-menu-parent > a,
.current-menu-item a { 
    color: blue !important; /* Important is required */
}
于 2021-05-03T08:57:33.747 回答
0

.current-menu-ancestor对我不起作用。.current-page-ancestor做过。

于 2013-11-01T13:10:01.210 回答
0

这对我有用。下面的 CSS 将允许您设置活动菜单的样式... 最多三个菜单。

.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}
  • 代表当前活动页面的菜单按钮将为黄色，

  • 如果代表当前活动页面的按钮是嵌套的，则其父级将为绿色...否则菜单上的顶级按钮将为绿色。

  • 最重要的是（无论您的菜单中出现多少级嵌套）任何具有.current-menu-ancestor类的元素 都将使用红色背景设置样式。

也可以只设置.current-menu-ancestor 的样式，并且任何父菜单项都将被设置样式。

于 2019-10-22T21:34:28.730 回答