【问题标题】:Highlight Wordpress parent menu item when submenu link active子菜单链接处于活动状态时突出显示 Wordpress 父菜单项
【发布时间】:2016-05-03 12:35:18
【问题描述】:

我在 Wordpress 中有一个简单的菜单。

I need to highlight the ACTIVE PARENT MENU ITEM when a submenu item is selected.

问题是,每当我通过 current-page-parent/current-page-ancestor 执行此操作时 - 下拉菜单中的所有菜单项都应用了活动样式以及父项。

有什么想法可以在不触及子菜单项样式的情况下做到这一点吗?

<ul id="menu-main" class="nav navbar-nav navbar-right">
  <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-249 dropdown"><a href="#">Parent Menu Item</a>
    <ul role="menu" class=" dropdown-menu">
      <li id="menu-item-251" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-251"><a href="#">Sub-menu Item</a></li>
    </ul>
  </li>
</ul>

【问题讨论】:

    标签: css wordpress drop-down-menu menu


    【解决方案1】:

    WordPress 自动向当前项目的祖先添加一些类,您可以使用它们来突出显示父项目。您可以在代码中看到 WordPress 如何添加 current-page-ancestorcurrent-menu-ancestor 类。

    我建议您使用 .current-menu-ancestor,因为它适用于所有对象类型。

    【讨论】:

    • 完美。谢谢。 .current-page-ancestor, .current-menu-ancestor { 背景颜色:#f9f9f9; }
    • 我想在点击子菜单项时突出显示主菜单项..请建议
    • 这些属性帮助了我:.current_page_parent > a { } .current-menu-parent > a { }
    猜你喜欢
    • 2014-12-12
    • 2012-12-27
    • 2017-12-20
    • 2014-11-19
    • 1970-01-01
    • 1970-01-01
    • 2013-03-14
    • 2018-10-15
    • 2021-03-01
    相关资源
    最近更新 更多