如何使用自定义CSS添加Bootstrap菜单和子菜单？

Question

如何使用自定义CSS添加Bootstrap菜单和子菜单？

3

我正在使用bootstrap开发一个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 -->

有什么想法吗？

- Vibration

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- arun · Accepted Answer

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

1）只需前往第三方开发的代码（在此处）（它是免费的）

2）如果您想自己制作而没有任何插件，则必须编写类似以下的代码，步骤1：在父页面CSS类中添加额外的CSS类（dropdown）您可以在此处添加额外的CSS类Appearance->菜单：您会找到CSS类（可选）如果您找不到它，则在右上角（靠近帮助）单击屏幕选项，您可以启用CSS类、描述等。

步骤2：实际代码在这里

<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>

步骤三：在页脚中包含以下内容。

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

最后，请不要忘记包含必要的Bootstrap CSS，JS和jQuery。

附注：我希望您选择第一种方法。