twitter-bootstrap 如何使用自定义 css 添加引导菜单、子菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23359891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add bootstrap menu,sub menu with custom css?
提问by Vibration
I am developing a wordpress theme using bootsatrap my html structure is something like :
我正在使用 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 -->
To integrate it in wordpress menu I used the code :
要将其集成到 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));
My problem is I want to add submenu and submenu related class like :
我的问题是我想添加子菜单和子菜单相关类，如：
<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>
My code is generating the code below :
我的代码正在生成以下代码：
<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 -->
Any idea?
任何的想法？
回答by arun
You can do it in two ways.
您可以通过两种方式做到这一点。
1) Simply go for the third party developed code here(its free too)
1）只需在此处获取第三方开发的代码（它也是免费的）
2) If you want to make your own without any plugin, then u have to code something like below, Step 1: Add an extra CSS class (dropdown) in the parent pages CSS class U can add that extra CSS class here Appearance-> menus: there u find CSS Classes (optional) If u didn't find it then, click screen option in the top right-hand corner (near help), there u can enable CSS classes, description, etc.,
2）如果你想自己制作没有任何插件，那么你必须编写如下代码，第1步：在父页面CSS类中添加一个额外的CSS类（下拉）你可以在这里添加额外的CSS类Appearance->菜单：在那里您可以找到 CSS 类（可选）如果您没有找到，请单击右上角的屏幕选项（靠近帮助），您可以在那里启用 CSS 类、描述等，
Step 2: the real code is here
第 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>
Step 3: in footer inclde the following
第 3 步：在页脚中包含以下内容
<script>
$('.sub-menu').addClass('dropdown-menu');
</script>
And finally, don't forget to include the necessary bootstrap CSS and js and jquery
最后，不要忘记包含必要的引导 CSS 和 js 和 jquery
PS: I hope u will go for the first method
PS：我希望你会采用第一种方法
