我有一个基本的菜单和一些菜单项有子菜单.我有很少的经验与wordpress和没有时间深入到细节现在.所以我的问题是,当用户导航到子菜单页之一时,突出显示顶部菜单项的最简单方法是什么?(我尝试使用javascript和纯css来通过元素id和使用“current-cat-parent”类设置color属性,但都不起作用)。任何帮助都将不胜感激。注意:我使用的主题称为变色龙。
pxiryf3j1#
你可以将当前菜单项类赋给.current-menu-ancestor类,如
.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{ color: #777777 !important; /* highlight color */ }
它将突出显示父页面菜单请参阅this page
hl0ma9xz2#
您可以在主题的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导航类,使当前页面的链接处于活动状态。我在这里写了一篇简短的文章来解释它是如何工作的:快!如果你有任何问题,请随时告诉我。
btqmn9zl3#
我在编辑这个时遇到了一点问题,但找到了一个简单的解决方案。我使用的是WordPress的店面主题,只需将此粘贴到您的子主题的style.css文件中:
style.css
li.current-menu-parent >a { color:red !important; }
kzmpq1sx4#
有意思。你的解决方案突出了父母而不是现在的孩子。但它让我走上了正确的道路,最终,这是我所需要的。
li.current-menu-parent >a, .current-menu-item >a { color: red !important; }
wmtdaxz35#
测试和工作,2021年
2021年。如果你们中的任何人还在寻找解决方案,那么它就在这里。这将突出显示父菜单及其子菜单。如果没有子菜单,则父菜单将突出显示。记住!important是必需的。
!important
.current-menu-parent > a, .current-menu-item a { color: blue !important; /* Important is required */ }
cuxqih216#
.current-menu-ancestor没有为我工作。.current-page-ancestor没有。
.current-menu-ancestor
.current-page-ancestor
zf9nrax17#
这对我很有效。下面的CSS将允许你对活动菜单进行样式化......最多三个菜单。
.current-menu-ancestor{ background:RED !important; } .current_page_parent{background:GREEN !important;} .active{background:YELLOW !important;}
也可以只设置**.current-menu-ancestor**的样式,而设置任何父菜单项的样式。
vohkndzv8#
如果你想突出显示主菜单上父项(比如我!),用jQuery试试:
jQuery(document).ready(function() { jQuery('#menu-mainmenu a[href*="' + document.URL.split('/')[3] + '"]') .parent().addClass('current-menu-item'); });
我还添加了'default'类到其中一个项目(在'li')中,以便为我的帖子页面选择它:
jQuery(document).ready(function() { if (jQuery('#menu-mainmenu a[href*="' + document.URL.split('/')[3] + '"]') .parent().addClass('current-menu-item').length == 0 && document.URL.split('/')[3].length > 1) jQuery('#menu-mainmenu .default').addClass('current-menu-item'); });
有了这个,你将有如下选择。例如:关于我们|产品展示|联系我们|关于我们'http:example.com':〉首页|产品展示|联系我们|关于我们'http://example.com/shop':关于我们|〉购物|联系我们|关于我们'http://example.com/shop/product-1':关于我们|〉购物|联系我们|关于我们'http://example.com/posts':关于我们|产品展示|〉新闻动态|关于我们'http://example.com/new-post':关于我们|产品展示|〉新闻动态|关于我们'http://example.com/about-us':关于我们|产品展示|联系我们|〉关于我们
8条答案
按热度按时间pxiryf3j1#
你可以将当前菜单项类赋给.current-menu-ancestor类,如
它将突出显示父页面菜单
请参阅this page
hl0ma9xz2#
您可以在主题的footer.php文件中的结束body标记之前插入以下代码。
它的美妙之处在于它是在PHP中编写的,所以代码是动态的。它所做的只是添加另一个本地WordPress导航类,使当前页面的链接处于活动状态。
我在这里写了一篇简短的文章来解释它是如何工作的:快!
如果你有任何问题,请随时告诉我。
btqmn9zl3#
我在编辑这个时遇到了一点问题,但找到了一个简单的解决方案。我使用的是WordPress的店面主题,只需将此粘贴到您的子主题的
style.css
文件中:kzmpq1sx4#
有意思。你的解决方案突出了父母而不是现在的孩子。但它让我走上了正确的道路,最终,这是我所需要的。
wmtdaxz35#
WordPress 5.7
测试和工作,2021年
2021年。如果你们中的任何人还在寻找解决方案,那么它就在这里。
这将突出显示父菜单及其子菜单。如果没有子菜单,则父菜单将突出显示。记住
!important
是必需的。cuxqih216#
.current-menu-ancestor
没有为我工作。.current-page-ancestor
没有。zf9nrax17#
这对我很有效。下面的CSS将允许你对活动菜单进行样式化......最多三个菜单。
也可以只设置**.current-menu-ancestor**的样式,而设置任何父菜单项的样式。
vohkndzv8#
如果你想突出显示主菜单上父项(比如我!),用jQuery试试:
我还添加了'default'类到其中一个项目(在'li')中,以便为我的帖子页面选择它:
有了这个,你将有如下选择。例如:关于我们|产品展示|联系我们|关于我们
'http:example.com':〉首页|产品展示|联系我们|关于我们
'http://example.com/shop':关于我们|〉购物|联系我们|关于我们
'http://example.com/shop/product-1':关于我们|〉购物|联系我们|关于我们
'http://example.com/posts':关于我们|产品展示|〉新闻动态|关于我们
'http://example.com/new-post':关于我们|产品展示|〉新闻动态|关于我们
'http://example.com/about-us':关于我们|产品展示|联系我们|〉关于我们