Многоуровневое меню навигации начальной загрузки в WordPress
Я конвертирую статический веб-сайт, созданный с помощью Bootstrap в WordPress. Вот мой код многоуровневого навигационного меню начальной загрузки:
<section class="menuBar">
<nav class="navbar navbar-expand-lg navbar-light" data-toggle="sticky-onscroll">
<div class="container">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNavbar" style="">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Commercial Appliances</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item dropdown-toggle" href="#">Refrigeration</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Refrigerators</a></li>
<li><a class="dropdown-item" href="#">Freezers</a></li>
<li><a class="dropdown-item" href="#">Walk-in Coolers/Refrigerators</a></li>
<li><a class="dropdown-item" href="#">Walk-in Freezers</a></li>
<li><a class="dropdown-item" href="#">Commercial Freezers</a></li>
<li><a class="dropdown-item" href="#">Commercial Refrigerators</a></li>
<li><a class="dropdown-item" href="#">Salad Bars</a></li>
<li><a class="dropdown-item" href="#">Sandwich Coolers</a></li>
<li><a class="dropdown-item" href="#">Wine Coolers</a></li>
<li><a class="dropdown-item" href="#">Ice Machines</a></li>
<li><a class="dropdown-item" href="#">Beer Coolers</a></li>
<li><a class="dropdown-item" href="#">Kegerators</a></li>
<li><a class="dropdown-item" href="#">Flower Coolers</a></li>
<li><a class="dropdown-item" href="#">Remote Condensers</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Cooking Equipment</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Commercial Ovens</a></li>
<li><a class="dropdown-item" href="#">Stoves/Ranges</a></li>
<li><a class="dropdown-item" href="#">Cooktops</a></li>
<li><a class="dropdown-item" href="#">Convection Ovens</a></li>
<li><a class="dropdown-item" href="#">Salamander Ovens/Broilers</a></li>
<li><a class="dropdown-item" href="#">Double Ovens</a></li>
<li><a class="dropdown-item" href="#">Grills</a></li>
<li><a class="dropdown-item" href="#">Wall Ovens</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Microwaves</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Griddles</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Hot Plates</a></li>
<li><a class="dropdown-item" href="#">Wok Ranges</a></li>
<li><a class="dropdown-item" href="#">Warmers</a></li>
<li><a class="dropdown-item" href="#">Deep Fryers</a></li>
<li><a class="dropdown-item" href="#">Steam Table</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Ice Machines / Ice Makers</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Countertop</a></li>
<li><a class="dropdown-item" href="#">Remote condenser</a></li>
<li><a class="dropdown-item" href="#">Modular</a></li>
<li><a class="dropdown-item" href="#">Under counter</a></li>
<li><a class="dropdown-item" href="#">Water filters</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Commercial Dishwashers</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Door Type</a></li>
<li><a class="dropdown-item" href="#">Conveyor Type</a></li>
<li><a class="dropdown-item" href="#">Under counter</a></li>
<li><a class="dropdown-item" href="#">Glasswasher</a></li>
<li><a class="dropdown-item" href="#">High Temperature Dishwashers</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Commercial Laundry</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Washers</a></li>
<li><a class="dropdown-item" href="#">Tumble Dryers (Gas/Electric)</a></li>
<li><a class="dropdown-item" href="#">Coin-operated Washer / Dryer</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Ventilation / Exhaust</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Commercial Kitchen Hoods</a></li>
<li><a class="dropdown-item" href="#">Exhaust Fans</a></li>
<li><a class="dropdown-item" href="#">Direct Drive Fans</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Water Heaters</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Electric / Gas Tankless Heaters</a></li>
<li><a class="dropdown-item" href="#">Electric / Gas Tank Heaters</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Garbage Disposals</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Food Wasters</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Residential Appliances</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Refrigerators / Freezers</a></li>
<li><a class="dropdown-item" href="#">Wine Cooler</a></li>
<li><a class="dropdown-item" href="#">Ice Makers</a></li>
<li><a class="dropdown-item" href="#">Washer Machine</a></li>
<li><a class="dropdown-item" href="#">Gas / Electric Dryer</a></li>
<li><a class="dropdown-item" href="#">Wall Ovens</a></li>
<li><a class="dropdown-item" href="#">Double Ovens</a></li>
<li><a class="dropdown-item" href="#">Ranges</a></li>
<li><a class="dropdown-item" href="#">Cooktops</a></li>
<li><a class="dropdown-item" href="#">Microwaves</a></li>
<li><a class="dropdown-item" href="#">Dishwasher</a></li>
<li><a class="dropdown-item" href="#">Garbage Disposal</a></li>
<li><a class="dropdown-item" href="#">Vent Hood</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">HVAC</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Split system </a></li>
<li><a class="dropdown-item" href="#">Minisplit Ductless systems</a></li>
<li><a class="dropdown-item" href="#">Packaged System</a></li>
<li><a class="dropdown-item" href="#">Gas / Electric Furnace</a></li>
<li><a class="dropdown-item" href="#">Heat Pumps</a></li>
<li><a class="dropdown-item" href="#">Evaporator Coils</a></li>
<li><a class="dropdown-item" href="#">Thermostat</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Installation</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item dropdown-toggle" href="#">Refrigeration Equipment</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Walk-in Cooler Installation</a></li>
<li><a class="dropdown-item" href="#">Ice Machine</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Cooking Equipment</a></li>
<li><a class="dropdown-item" href="#">Commercial Dishwashers</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Commercial Laundry</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Washers</a></li>
<li><a class="dropdown-item" href="#">Dryers</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">HVAC</a></li>
<li><a class="dropdown-item" href="#">Ventilation / Exhaust</a></li>
<li><a class="dropdown-item" href="#">Water Heaters</a></li>
<li><a class="dropdown-item" href="#">Garbage Disposals</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="maintenance-programs.php">Maintenance Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact Us</a>
</li>
</ul>
</div>
<a class="btn btn-red" href="#">Book Now</a>
</div>
</nav>
</section>
И это прекрасно работает для меня:
Но в WordPress я использовал WP_Bootstrap_Navwalker() для меню навигации. Я поставил depth => 3, но он не показывает многоуровневое меню, как ожидалось. Вот мой код:
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 3,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'mainNavbar',
'menu_class' => 'navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
) );
?>
Но это работает только для выпадающего списка. Он не показывает подменю подменю. Как я могу решить эту проблему?
3 answers
Вот кое-что интересное для вас
ШАГ 1 добавьте скрипт в заголовок, как показано ниже (всегда лучше использовать метод очереди. мне нужен кто-то, кто поможет мне правильно добавить приведенный ниже скрипт в WordPress.jquery должен запускаться перед вторым скриптом>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
});
</script>
ШАГ 2 Добавьте css, как показано ниже:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
/* to show the arrow */
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-toggle a::after{
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
ШАГ 3
Теперь зайдите в класс walker:
найдите && 0 === $depth
и удалите его. Также убедитесь, что'depth' => 3
Теперь он должен начать показывать меню 3-го уровня. может потребоваться некоторый дополнительный css.
Это добавляется в заголовок:
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 3,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
Для меня это работает идеально, когда я удаляю эту строку кода:
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
Как и в начальной загрузке v4, класс .dropdown-подменю не существует (по крайней мере, в моем), поэтому, если вы хотите, чтобы ваши подменю закрывались при одном щелчке за пределами раскрывающегося списка, просто измените .dropdown-submenu .show
на .dropdown-menu .dropdown-menu.show
в приведенном выше решении и сделайте его таким, как в приведенном ниже фрагменте:
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-menu .dropdown-menu.show').removeClass("show");
});
return false;
});