Есть сайт на WordPress, где в тему хочу добавить bootstrap
меню с выпадающим списком при наведении. Регистрирую меню стандартным способом:
<?php
register_nav_menus(array(
'top' => 'Верхнее меню'
));
wp_nav_menu( array(
'container' => 'div',
'container_class' => 'collapse navbar-collapse navbar-ex1-collapse',
'menu_class'=>'nav navbar-nav navbar-right',
'theme_location'=>'top'
) );
?>
Затем хочу перенести в него функционал этого меню, но есть проблемы с добавлением в ссылку классов class="dropdown-toggle"
атрибутов data-toggle="dropdown"
и во внутренний список ul
класса dropdown-menu
. Как это можно сделать? фидл
.dropdown:hover > .dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet">
<nav class="navbar navbar-default navbar-static">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".js-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="padding:15px 15px;">Название проекта</a>
</div>
<div class="collapse navbar-collapse js-navbar">
<ul class="nav navbar-nav">
<li><a href="#">Главная</a>
</li>
<li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
Меню
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Текст подпункта</a>
</li>
<li><a href="#">Текст подпункта</a>
</li>
<li class="divider"></li>
<li><a href="#">Текст подпункта</a>
</li>
</ul>
</li>
<li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
Меню
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Текст подпункта</a>
</li>
<li><a href="#">Текст подпункта</a>
</li>
<li class="divider"></li>
<li><a href="#">Текст подпункта</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
Меню
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Текст подпункта</a>
</li>
<li><a href="#">Текст подпункта</a>
</li>
<li class="divider"></li>
<li><a href="#">Текст подпункта</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>