Bootstrap - 菜单无法正常工作

Question

我正在实现一个基于 css 形状的引导菜单，我在显示子菜单时遇到了问题，我认为这是因为我在形状 div 中有一个固定的 div。

.menu {
  width: 100%;
  height: 40px;
  background-color: blue;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  position: relative;
}
.menu ul li {
  font-family: 'Seravek';
  font-size: 14px;
  text-transform: uppercase;
}

.menu:before {
  content: '';
  width: 99.5%;
  height: 38px;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  background: grey;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  height: 40px !important;
}
.navbar-default .navbar-collapse #menu-menuprincipal, .navbar-default .navbar-form #menu-menuprincipal {
  height: 40px;
}
.navbar-default .navbar-collapse #menu-menuprincipal li, .navbar-default .navbar-form #menu-menuprincipal li {
  height: 40px;
}
.navbar-default .navbar-collapse #menu-menuprincipal li a, .navbar-default .navbar-form #menu-menuprincipal li a {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 40px;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
  <div class="container-fluid no-padding">
    <div class="row no-margin">
      <div class="col-xs-4 col-sm-4 col-md-3 logo">
        <div class="navbar-header">
          <a class="navbar-brand" href="/site/">
           <img alt="site" src="<?php bloginfo('template_url')?>/images/logo.png">
                  </a>
        </div>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-9 no-padding">
        <div class="menu-operations">
          <div class="languages">

          </div>
          <div class="social">

          </div>
        </div>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-9 no-padding">
        <div class="navbar-header logo-vertical">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-9 no-padding">
        <div class="menu">
          <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
            <ul id="menu-menuprincipal" class="nav navbar-nav navbar-right">
              <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a title="Empresa" href="">Empresa</a></li>
              <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-37 dropdown"><a title="Produção" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Produção <span class="caret"></span></a>
                <ul role="menu" class=" dropdown-menu">
                  <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-38 active"><a title="Produção" href="">Produção</a></li>
                  <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a title="Equipamentos" href="">Equipamentos</a></li>
                </ul>
              </li>
              <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a title="Mercados" href="">Mercados</a></li>
              <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30 dropdown"><a title="Qualidade e Ambiente" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Qualidade e Ambiente <span class="caret"></span></a>
                <ul role="menu" class=" dropdown-menu">
                  <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a title="Qualidade" href="">Qualidade</a></li>
                  <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a title="Ambiente" href="">Ambiente</a></li>
                </ul>
              </li>
              <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a title="Notícias" href="">Notícias</a></li>
              <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a title="Contactos" href="">Contactos</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

我正在使用带有wp_bootstrap_navwalker 的wordpress，代码是菜单类中的链接：

<div class="menu">
  <?php
    wp_nav_menu( array(
        'menu'              => 'menuPrincipal',
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav navbar-right',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker())
    );
  ?>
</div>

Answer 1

试试这个：

<?php
    if ( has_nav_menu( 'primary' ) ) {
        wp_nav_menu(
        array(
                'theme_location'  => 'primary',
                'menu'            => '',
                'container'       => 'nav',
                'container_class' => 'collapse navbar-collapse',
                'container_id'    => 'bs-example-navbar-collapse-1',
                'menu_class'      => 'nav navbar-nav navbar-right',
                'menu_id'         => 'navigation',
                'echo'            => true,
                 'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                 'walker'            => new wp_bootstrap_navwalker,
                'before'          => '',
                'after'           => '',
                'link_before'     => '',
                'link_after'      => '',
                'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                'depth'           => 0,
            )
        );
    } else {
        wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => '' ) );
    }
?>

我只是根据您的数据调整我的设置。一般来说，您需要定义items_wrap 以获得您需要的结果。

并且还将container_id (wp_bootstrap_navwalker) 更改为更自然的东西。

如果您遵循 HTML5 规则，那么从 SEO 方面来说，使用 <nav> 标签。这也遵循引导规则