我使用了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.