Question

导航菜单包含顶级项目，其中一项称为“商店”。

在“商店”中，下拉菜单中会显示子级别的项目。这些项目是产品类别，点击后，活动的CSS状态（文本转换：下划线）仅显示在下拉菜单中，而不显示在“商店”按钮上。

我需要在'Shop'上显示所有下拉项目的活动状态指示，因为当菜单不可见时，下拉项下划线是没有意义的。完全打破了用户体验。

我正在使用WordPress和WooCommerce。

Answer 1

您需要使用current-menu-parent选择器向样式表添加一些代码。代码 -

li.current-menu-parent > a{ text-decoration: underline; }

Answer 2

使用current-menu-ancestor类。

.current-menu-ancestor > a { text-decoration: underline; }

Answer 3

您可以只为顶级项目添加一个类名称，并为其设置样式。

class Navigation_Menu extends Walker_Nav_Menu {

function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
    $id_field = $this->db_fields['id'];
    //if ( ! empty( $children_elements[ $element->$id_field ] ) ) {
        //$element->classes[] = 'has-dropdown';
    //}
    if( $depth == 0 ){
        $element->classes[] = 'top-level-item';
    }
    Walker_Nav_Menu::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
  }
}

现在顶级菜单项类中应该有'top-level-item'。你可以设计风格。

如何仅为WordPress上的顶级导航项显示活动状态（例如下划线）？

3 个答案: