在 WordPress 中 wp_nav_menu 上的子菜單上應用 CSS

Question

我的菜單部分有以下 html：

<nav class="navigation">
  <ul>
    <li class="active-menu">Home</li>
    <li>About
      <ul class="submenu>
         <li class="sub-item">Our History</li>
         <li class="sub-item">Our Goal</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>
</nav>

現在我打算在這里添加兩件事：一個是active-menu class 如果項目單擊是活動的，然后將類即submenu和sub-item添加到在 WordPress 菜單 Dasbhoard 中設置的子菜單中。

到目前為止，我有以下代碼：

 <?php wp_nav_menu(array(
       'theme_location' => 'headerMenuLocation'
  )); ?> 

如何自定義我的wp_nav_menu以添加這些類？

先感謝您。

Answer 1

<?php 
    wp_nav_menu(                  
                array(                                
                         'theme_location' => 'headerMenuLocation',
                         'menu'           => false,
                         'container'      => 'ul',
                         'menu_class'  => 'navbar-nav',                                      
                               
                                )                   
                   );
                   ?>

您必須在“menu_class”中添加您的自定義類。

Answer 2

您可以使用 add_filter function 為 class 添加到 li 標簽

add_filter ( 'nav_menu_css_class', 'so_37823371_menu_item_class', 10, 4 );

function so_37823371_menu_item_class ( $classes, $item, $args, $depth ){
  $classes[] = 'sub-item';
  return $classes;
}