wordpress - 如何使用自定义 css 添加 Bootstrap 菜单、子菜单？

Question

我正在使用 bootsatrap 开发一个 wordpress 主题，我的 html 结构是这样的:

<div class="collapse navbar-collapse inner_collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav inner">
      <li><a href="brushes.html">BRUSHES</a></li>
      <li><a href="body.html">BODY</a></li>
      <li class="dropdown">
          <a href="blades.html" class="dropdown-toggle">BLADES</a>
          <ul class="dropdown-menu">
            <li><a href="#">Men</a></li>
            <li><a href="#">Woman</a></li>
          </ul>
      </li>
      <li><a href="beauty.html">BEAUTY</a></li>
      <li><a href="baby.html">BABY</a></li>
      <li><a href="pet.html">PET</a></li>
  </ul>


</div><!-- /.navbar-collapse -->

为了将它集成到 wordpress 菜单中，我使用了代码:

wp_nav_menu(array('theme_location' => 'navi', 'container' => 'false','menu_class' => 'nav navbar-nav inner', 'menu_id' => 'nav', 'echo' => 'true', 'fallback_cb' => 'themezee_default_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0));

我的问题是我想添加子菜单和子菜单相关类，例如:

<li class="dropdown">
   <a href="blades.html" class="dropdown-toggle">BLADES</a>
   <ul class="dropdown-menu">
     <li><a href="#">Men</a></li>
     <li><a href="#">Woman</a></li>
   </ul>
</li>

我的代码正在生成以下代码:

<div class="collapse navbar-collapse inner_collapse" id="bs-example-navbar-collapse-1">
   <ul id="menu-main-menu" class="nav navbar-nav inner">
                                      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a title="Brushes" href="http://localhost/bassWorking/brushes/">Brushes</a></li>
                                      <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a title="Body" href="http://localhost/bassWorking/body/">Body</a></li>
                                      <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-29 current_page_item menu-item-has-children menu-item-43 dropdown active"><a title="Blades" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Blades <span class="caret"></span></a>
                                            <ul role="menu" class=" dropdown-menu">
                                                <li id="menu-item-342" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-342"><a title="Men" href="#">Men</a></li>
                                                <li id="menu-item-343" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-343"><a title="Women" href="#">Women</a></li>
                                            </ul>
                                      </li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a title="Beauty" href="http://localhost/bassWorking/beauty/">Beauty</a></li>
                            <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a title="Baby" href="http://localhost/bassWorking/baby/">Baby</a></li>
                            <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a title="Pet" href="http://localhost/bassWorking/pet/">Pet</a></li>
   </ul>                                      
</div><!-- /.navbar-collapse -->

有什么想法吗？

Answer 1

您可以通过两种方式完成。

1) 直接找第三方开发的代码here (它也是免费的)

2) 如果你想在没有任何插件的情况下制作你自己的，那么你必须编写如下代码， 第 1 步:在父页面 CSS 类中添加一个额外的 CSS 类(下拉) 您可以在此处添加额外的 CSS 类 Appearance-> menus:在那里您可以找到 CSS 类(可选) 如果你没有找到它，点击右上角的屏幕选项(靠近帮助)，在那里你可以启用 CSS 类、描述等，

第二步:真正的代码在这里

<nav class="navbar navbar-inverse logoname" role="navigation">
    <div class="navbar-header title">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
  <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
    <?php 
    $menu_args = array(
      'menu'            => 'Main Menu', 
      'container'       => 'container', 
      'container_class' => 'container_class', 
      'container_id'    => 'container_id',
      'menu_class'      => 'nav navbar-nav',
      'menu_id'         => 'menu_id',
      'echo'            => true);
    ?>
    <?php wp_nav_menu($menu_args);?>
    </div>
</nav>

第 3 步:在页脚中包含以下内容

<script>
  $('.sub-menu').addClass('dropdown-menu'); 
</script>

最后，不要忘记包含必要的 bootstrap CSS 和 js 以及 jquery

PS:希望你选择第一种方法