Question

我使用了Stack中的示例代码和函数将CSS代码和菜单结构链接到Wordpres引擎。而且效果很好。但是我不知道如何通过子菜单选项来放大这些菜单。我建立了一个严格的HTML / CSS代码。它看起来像这样：

按钮-导航栏按钮-按钮

那么您如何确定菜单的哪一部分应作为子菜单，而正常情况下又应如何？

header.php

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="font-size: 1.05rem">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

<?php
      wp_nav_menu( array(
        'theme_location'  => 'topnav',
        'menu'            =>'topnav',
        'container'       => 'div', 
        'container_class' => 'collapse navbar-collapse ', 
        'container_id'    => 'navbarCollapse',
        'menu_class'      => 'menu', 
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'items_wrap'      => '<ul class="navbar-nav mr-auto mt-2 mt-lg-0">%3$s</ul>',
        'depth'           => 1
      ) );
    ?>
    
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="Szukaj..." placeholder="Szukaj..." aria-label="Szukaj...">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Szukaj...</button>
    </form>
  
</nav>

functions.php

 // register the nav
 function register_my_menu() {
  register_nav_menu('topnav',__( 'topnav' ));
 }
 add_action( 'init', 'register_my_menu' );

// let's add "*active*" as a class to the li

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if( in_array('current-menu-item', $classes) ){
             $classes[] = 'nav-item active';
     }
     return $classes;
}

// let's add our custom class to the actual link tag    

function atg_menu_classes($classes, $item, $args) {
  if($args->theme_location == 'topnav') {
    $classes[] = 'nav-link';
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);

function add_menuclass($ulclass) {
   return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');

在构建代码时，它看起来像这样：

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item active">
        <a class="nav-link" href="#">Strona Główna <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          O szkole
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Dokumenty</a>
        </div>
      </li>
 <li class="nav-item">
        <a class="nav-link" href="#">Galeria<span class="sr-only">(current)</span></a>
      </li>
// and here again e.g. drop down list, and then normally, normally and again e.g.

WordPress导航栏和子菜单导航栏

0 个答案: