如何使用Bootstrap NAV Walker拥有两个菜单?

时间:2017-03-11 作者:Robert Andrews

我正在使用bs4navwalker, 输出具有正确引导格式的WordPress导航菜单的脚本。事实上,与往常不同wp-bootstrap-navwalker, 我正在使用bs4navwalker, 变体。

这是我的HTML。。。

<!-- navigation --> <nav class="navbar fixed-top navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth"> <!-- collapse at small breakpoint --> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> Brand </a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <!-- first nav --> <ul class="nav navbar-nav mr-auto"> <!-- .mr-auto required to push second nav right http://stackoverflow.com/a/41769285/1375163 --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/product1link/">Product 1</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Service 1</a> <a class="dropdown-item" href="#">Service 2</a> <a class="dropdown-item" href="#">Service 3</a> <a class="dropdown-item" href="#">Service 4</a> <a class="dropdown-item" href="#">Service 5</a> <a class="dropdown-item" href="#">Service 6</a> </div> </li> </ul> <!-- second nav --> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Clients </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Category 1</a> <a class="dropdown-item" href="#">Category 2</a> <a class="dropdown-item" href="#">Category 3</a> <a class="dropdown-item" href="#">Category 4</a> <a class="dropdown-item" href="#">Category 5</a> <a class="dropdown-item" href="#">Category 6</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="btn btn-success pmd-ripple-effect btn-md" href="#" role="button">Contact</a> </li> </ul> </div> </div> </nav>

下面是它的样子。。。

enter image description here

这是我目前的WordPress代码,只需完成第一个菜单。。。

<nav class="navbar fixed-top navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth"> <!-- collapse at small breakpoint --> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="<?php echo esc_url( home_url( \'/\' ) ); ?>"><?php bloginfo( \'name\' ); ?></a> <!-- first nav --> <?php wp_nav_menu([ \'menu\' => \'primary\', \'theme_location\' => \'primary\', \'container\' => \'div\', \'container_id\' => \'bs4navbar\', \'container_class\' => \'collapse navbar-collapse\', \'menu_id\' => false, \'menu_class\' => \'navbar-nav mr-auto\', \'depth\' => 2, \'fallback_cb\' => \'bs4navwalker::fallback\', \'walker\' => new bs4navwalker() ]); ?> </div> </nav>

我想把两者都包括在内。但我不明白如何在适当的位置使用bs4navwalker合并第二个相邻菜单。

两者都应该在“collapse-navbar-collapse”中,而这正是我无法看到的。当我进行测试时,它似乎重复了这个div。

1 个回复
SO网友:Robert Andrews

答案来自elsewhere 有:

使用类“collapse navbar collapse”编写div,如下所示html-在数组中编码并将“container”设置为false。之后,您可以调用容器中的两个不同菜单。“”

没有回避我的最后一个导航项目实际上是一个按钮这一事实,但回答了这个问题。

相关推荐

如何创建4列和2列Twitter-Bootstrap相结合的WordPress循环?

我想根据4列(桌面视图)、2列(mobile view 768px)和1列(mobile view 425px)的组合显示帖子。我在下面找到了很棒的代码:<?php $paged = ( get_query_var(\'paged\') ) ? get_query_var(\'paged\') : 1; $args=array( \'post_type\' => \'post\',