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>

我使用WordPress的與wp_bootstrap_navwalker和代碼是菜單類的內部鏈接THI：

<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）更改爲更自然的事物。

也從SEO方面，如果您遵循HTML5規則，使用<nav>標記。這也遵循Bootstrap規則