Не могу сделать двухуровневое меню, подскажите пожалуйста как правильнее сделать?
Нужно сделать такое меню
<nav class="nav">
<div class="nav__wrapper">
<ul class="nav__list nav-list">
<li class="nav-list__item nav-list__item--toggle">
<a href="#" class="nav-list__link">Открыть меню</a>
<div class="nav-list__icon"></div>
</li>
<li class="nav-list__item">
<a href="#" class="nav-list__link">Гидроизоляция </a>
<span class="nav-list__icon"></span>
<ul class="nav-sublist">
<li class="nav-sublist__item">
<p class="nav-sublist__title">Популярные услуги:</p>
</li>
<li class="nav-sublist__item">
<a href="#" class="nav-sublist__link">Гидроизоляция кровли</a>
</li>
<li>
<a href="#" class="nav-sublist__button">Посмотреть все услуги</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Что не получается, не могу добавить первым пунктом для мобильных
<li class="nav-list__item nav-list__item--toggle">
<a href="#" class="nav-list__link">Открыть меню</a>
<div class="nav-list__icon"></div>
</li>
Если меню двухуровневое то не могу добавить после a
<span class="nav-list__icon"></span>
добавить
<li class="nav-sublist__item">
<p class="nav-sublist__title">Популярные услуги:</p>
</li>
и поменять стили для li a в двухуровневых
Делаю так
<nav id="menu" class="nav" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement">
<?php wp_nav_menu( array(
'menu' => 'main-menu', // (string) Название выводимого меню (указывается в админке при создании меню, приоритетнее чем указанное местоположение theme_location - если указано, то параметр theme_location игнорируется)
'container' => 'div', // (string) Контейнер меню. Обворачиватель ul. Указывается тег контейнера (по умолчанию в тег div)
'container_class' => 'nav__wrapper', // (string) class контейнера (div тега)
'container_id' => '', // (string) id контейнера (div тега)
'menu_class' => 'nav__list nav-list', // (string) class самого меню (ul тега)
'menu_id' => '', // (string) id самого меню (ul тега)
'echo' => true, // (boolean) Выводить на экран или возвращать для обработки
'fallback_cb' => 'wp_page_menu', // (string) Используемая (резервная) функция, если меню не существует (не удалось получить)
'before' => '', // (string) Текст перед <a> каждой ссылки
'after' => '', // (string) Текст после </a> каждой ссылки
'link_before' => '', // (string) Текст перед анкором (текстом) ссылки
'link_after' => '', // (string) Текст после анкора (текста) ссылки
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'add_li_class' => 'nav-list__item',// (integer) Глубина вложенности (0 - неограничена, 2 - двухуровневое меню)
'walker' => '' // (object) Класс собирающий меню. Default: new Walker_Nav_Menu
) ); ?>
</nav>
в functions.php
function theme_add_anchor_links($classes, $item, $args) {
$classes['class'] = "nav-list__link";
return $classes;
}
add_filter("nav_menu_link_attributes", "theme_add_anchor_links", 1, 3);
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );
function change_wp_nav_menu( $classes, $args, $depth ) {
foreach ( $classes as $key => $class ) {
if ( $class == 'sub-menu' ) {
$classes[ $key ] = 'nav-sublist';
}
}
return $classes;
}
Простой