Не могу подставить нужный class в выпадающее меню 2 го порядка
-
Здравствуйте знакомлюсь с wordpress, и столкнулся с огромной для себя проблемой, не могу прикрепить нужный class к выпадающему списку меню 2 уровня…
Использую фреймворк uikitРазметка меню выглядит так:
<ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Пункт меню</a></li> <li><a href="#" uk-icon="icon: chevron-down">Пункт меню</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li><a href="#">Подпункт меню</a></li> <li><a href="#">Подпункт меню</a></li> <li><a href="#">Подпункт меню</a></li> </ul> </div> </li> <li><a href="#">Пункт меню</a></li> </ul>в header.php вывожу так:
<?php wp_nav_menu( array( 'theme_location' => 'uk-navbar-nav', 'depth' => 0, 'menu_class' => 'uk-navbar-nav', 'container' => false)); ?>в functions.php регю так:
php register_nav_menus(array( 'uk-navbar-nav' => 'Верхнее горизонтальное меню', 'footer' => 'Нижнее меню' ));Результат:
http://prntscr.com/f2evx3 (скрин)
То есть не работает меню 2 порядка, вот скрин кода: http://prntscr.com/f2ewqd
Ещё не понятно сделать активным .uk-active чтобы при переходе в любую категорию было видно где нахожусь…
-
mazletop,
Откатите всё назад до исходного состояния (до регистрации меню). Все предыдущие созданные вами «волкеры» удалите. Добавьте в файл функций:
/* Кастомизация выпадающего меню с классами Uikit */ class Satico_Dropdown_Walker_Nav_Menu extends Walker_Nav_Menu { function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat( "\t", $depth ); $output .= "\n$indent<div class=\"uk-navbar-dropdown\"><ul class=\"uk-nav uk-navbar-dropdown-nav sub-menu\">\n"; } function end_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat( "\t", $depth ); $output .= "$indent</ul></div>\n"; } }В файле header при вызове функции wp_nav_menu в конце добавляете новую строку (новый элемент массива):
'theme_location' => 'uk-navbar-nav', 'depth' => 0, 'menu_class' => 'uk-navbar-nav', 'container' => false, // эта строка должна заканчиваться запятой! 'walker' => new Satico_Dropdown_Walker_Nav_Menu()На выходе должно получится:
Пробуйте.
Satico
Да, всё получилось, всё работает! Даже не верится что проблема решена, ура!
—
Подскажите пожалуйста ещё один небольшой момент, есть ещё иконочка там подсказывающая что меню выпадающая, вот скрин: http://prntscr.com/f2v3jiВот так это выглядит
<a href="#" uk-icon="icon: chevron-down">Блог</a>Она находится над
<div class="uk-navbar-dropdown">Попробовал сделать так:
/* Кастомизация выпадающего меню с классами Uikit */ class Satico_Dropdown_Walker_Nav_Menu extends Walker_Nav_Menu { function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat( "\t", $depth ); $output .= "\n$indent<a uk-icon=\"icon: chevron-down\"><div class=\"uk-navbar-dropdown\"><ul class=\"uk-nav uk-navbar-dropdown-nav sub-menu\">\n"; } function end_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat( "\t", $depth ); $output .= "$indent</ul></div>\n"; } }Вот попробовал вставить по аналогии:
<a uk-icon=\"icon: chevron-down\">Иконка появилась, по так же появился лишний
<a href="#">Пунк меню</a> <a uk-icon="icon: chevron-down"> <div class="uk-navbar-dropdown">...Как то возможно грамотно решить этот вопрос?
—
Забыл, там же есть ещё<li class="uk-active"><a href="#">123</a></li>А как сделать чтобы у активного пункта меню подствечивалось классом
uk-activeчто он активный?Вот попробовал вставить по аналогии:
Верхний код править не нужно:)
Добавьте этот код в файл функций (сразу после волкера), чтобы всё в одном месте было.
// Добавляем атрибут uk-icon к элементу меню (тег a), который содержит подменю add_filter( 'nav_menu_link_attributes', 'add_class_to_items_link', 10, 3 ); function add_class_to_items_link( $atts, $item, $args ) { $hasChildren = ( in_array('menu-item-has-children', $item->classes) ); if ($hasChildren) { $atts['uk-icon'] = 'icon: chevron-down'; } return $atts; } // Добавляем класс uk-active к активному элементу меню (тег li) add_filter( 'nav_menu_css_class' , 'special_nav_class' , 10 , 2 ); function special_nav_class ( $classes, $item ) { if ( in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes) ) { $classes[] = 'uk-active '; } return $classes; }Должно так получится:
Проверьте, у меня работает.
- Тема «Не могу подставить нужный class в выпадающее меню 2 го порядка» закрыта для новых ответов.