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'
) );.dropdown:hover > .dropdown-menu {
display: block;
}<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>register_nav_menus(array(
'top' => 'Верхнее',
'bottom' => 'Внизу'
));
if (!class_exists('bootstrap_menu')) {
class bootstrap_menu extends Walker_Nav_Menu {
private $open_submenu_on_hover;
function __construct($open_submenu_on_hover = true) {
$this->open_submenu_on_hover = $open_submenu_on_hover;
}
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<ul class=\"dropdown-menu\">\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$item_html = '';
parent::start_el($item_html, $item, $depth, $args);
if ( $item->is_dropdown && $depth === 0 ) {
if (!$this->open_submenu_on_hover) $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"', $item_html);
$item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
}
$output .= $item_html;
}
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
if ( $element->current ) $element->classes[] = 'active';
$element->is_dropdown = !empty( $children_elements[$element->ID] );
if ( $element->is_dropdown ) {
if ( $depth === 0 ) {
$element->classes[] = 'dropdown';
if ($this->open_submenu_on_hover) $element->classes[] = 'show-on-hover';
} elseif ( $depth === 1 ) {
$element->classes[] = 'dropdown-submenu';
}
}
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
}<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topnav" aria-expanded="false">
<span class="sr-only">Меню</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="topnav">
<?php $args = array(
'theme_location' => 'top',
'container'=> false,
'menu_id' => 'top-nav-ul',
'items_wrap' => '<ul id="%1$s" class="nav navbar-nav %2$s">%3$s</ul>',
'menu_class' => 'top-menu',
'walker' => new bootstrap_menu(true)
);
wp_nav_menu($args);
?>
</div>
</nav>@media (min-width: 979px) {
ul.nav li.dropdown.show-on-hover:hover > ul.dropdown-menu {
display: block;
}
.comment-list .children {
padding: 0;
margin-left: 74px;
padding-bottom: 15px;
}
.comment-list .media {
margin-top: 0;
}
}
Простой
