Как создать многоуровневое меню, горизонтальное с выпадающими пунктами?
У меня есть меню, и мне нужно сделать его трехуровневым. Когда я добавляю один дочерний элемент к другому, меню перестаёт работать когда я его открываю. Сайт сделан на WordPress
Логика работы при нажатии на меню:
jQuery('.icon').on('click', function() { jQuery('.header-menu-mobile').fadeToggle(); jQuery('ul.sub-menu').slideUp(); }); jQuery('ul.menu li:has(ul)').prepend('<span></span>'); jQuery('.adv-title-card span span').each(function(){ n = jQuery(this).data(); jQuery(this).spincrement({ from: 1, thousandSeparator: '', duration: 5000 }); }); jQuery(document).on("click", '.menu .menu-item-has-children > span', function(event) { jQuery(this).parent().find('ul.sub-menu').slideToggle("fast"); }); jQuery('.sub-menu .menu-item, .menu-close').on('click', function() { jQuery('.header-menu-mobile').fadeOut(); jQuery('ul.sub-menu').slideUp(); }); |
jQuery('.icon').on('click', function() { jQuery('.header-menu-mobile').fadeToggle(); jQuery('ul.sub-menu').slideUp(); }); jQuery('ul.menu li:has(ul)').prepend('<span></span>'); jQuery('.adv-title-card span span').each(function(){ n = jQuery(this).data(); jQuery(this).spincrement({ from: 1, thousandSeparator: '', duration: 5000 }); }); jQuery(document).on("click", '.menu .menu-item-has-children > span', function(event) { jQuery(this).parent().find('ul.sub-menu').slideToggle("fast"); }); jQuery('.sub-menu .menu-item, .menu-close').on('click', function() { jQuery('.header-menu-mobile').fadeOut(); jQuery('ul.sub-menu').slideUp(); });
Код HTML:
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1416"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/">Для Абонентов<span class="submenu-toggle"></span></a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1437"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d0%bf%d0%b0%d0%bc%d1%8f%d1%82%d0%ba%d0%b0-%d0%be%d0%bf%d0%bb%d0%b0%d1%82%d0%b0-%d1%83%d1%81%d0%bb%d1%83%d0%b3/">Памятка «Оплата услуг»</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1432"><a href="https://2gis.ru/bratsk/route/7178217496510472?m=101.761206%2C56.316564%2F14.2">Автобус №12</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1420"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d1%81%d0%be%d1%81%d0%bd%d0%be%d0%b2%d1%8b%d0%b9-%d0%b1%d0%be%d1%80/">Сосновый бор<span class="submenu-toggle"></span></a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1418"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d1%81%d0%be%d1%81%d0%bd%d0%be%d0%b2%d1%8b%d0%b9-%d0%b1%d0%be%d1%80/https-go-2gis-com-l5qygd/">Камеры Сосновый бор</a></li> </ul> </li> </ul> |
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1416"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/">Для Абонентов<span class="submenu-toggle"></span></a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1437"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d0%bf%d0%b0%d0%bc%d1%8f%d1%82%d0%ba%d0%b0-%d0%be%d0%bf%d0%bb%d0%b0%d1%82%d0%b0-%d1%83%d1%81%d0%bb%d1%83%d0%b3/">Памятка «Оплата услуг»</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1432"><a href="https://2gis.ru/bratsk/route/7178217496510472?m=101.761206%2C56.316564%2F14.2">Автобус №12</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1420"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d1%81%d0%be%d1%81%d0%bd%d0%be%d0%b2%d1%8b%d0%b9-%d0%b1%d0%be%d1%80/">Сосновый бор<span class="submenu-toggle"></span></a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1418"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d1%81%d0%be%d1%81%d0%bd%d0%be%d0%b2%d1%8b%d0%b9-%d0%b1%d0%be%d1%80/https-go-2gis-com-l5qygd/">Камеры Сосновый бор</a></li> </ul> </li> </ul>
Nav_menu в function:
add_theme_support( 'menus' ); //nav-menu add_filter('nav_menu_item_title', 'add_menu_item_has_children', 10, 4); function add_menu_item_has_children( $title, $item, $args, $depth ) { if (in_array('menu-item-has-children', $item->classes)) { $title = $title . '<span class="submenu-toggle"></span>'; } return $title; } |
add_theme_support( 'menus' ); //nav-menu add_filter('nav_menu_item_title', 'add_menu_item_has_children', 10, 4); function add_menu_item_has_children( $title, $item, $args, $depth ) { if (in_array('menu-item-has-children', $item->classes)) { $title = $title . '<span class="submenu-toggle"></span>'; } return $title; }
Проблема возникает в файле slick.min.js, он отвечает за слайдеры. Что дописать в скрипт чтобы выводилось sub-menu третьегоуровня. При нажатии menu становиться недоступным ,а menu скрывается
Дополнительные вопросы
hudiakov @hudiakov Как то так, только подстроить под свои нужды. Ответы на вопрос 0
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Трёхуровневое меню на WordPress лучше делать через стандартную структуру
ul.menuи аккуратную JS-логику раскрытия. Судя по описанию, меню ломается потому, что скрипт закрывает всеul.sub-menuсразу и не различает уровень, по которому кликнули. Для многоуровневого меню нельзя просто делатьjQuery('ul.sub-menu').slideUp()при каждом клике: так вы закрываете и родителя, и вложенные пункты.Правильная логика:
Пример более контролируемого JS:
jQuery(function ($) { $('.menu li:has(ul)').addClass('has-submenu').children('a').after('<button class="submenu-toggle" type="button" aria-expanded="false">+</button>'); $('.menu').on('click', '.submenu-toggle', function (e) { e.preventDefault(); const $button = $(this); const $li = $button.closest('li'); const $submenu = $li.children('ul.sub-menu'); $li.siblings('.is-open').removeClass('is-open') .children('.submenu-toggle').attr('aria-expanded', 'false').end() .children('ul.sub-menu').slideUp(150); $li.toggleClass('is-open'); $button.attr('aria-expanded', $li.hasClass('is-open') ? 'true' : 'false'); $submenu.stop(true, true).slideToggle(150); }); });jQuery(function ($) { $('.menu li:has(ul)').addClass('has-submenu').children('a').after('<button class="submenu-toggle" type="button" aria-expanded="false">+</button>'); $('.menu').on('click', '.submenu-toggle', function (e) { e.preventDefault(); const $button = $(this); const $li = $button.closest('li'); const $submenu = $li.children('ul.sub-menu'); $li.siblings('.is-open').removeClass('is-open') .children('.submenu-toggle').attr('aria-expanded', 'false').end() .children('ul.sub-menu').slideUp(150); $li.toggleClass('is-open'); $button.attr('aria-expanded', $li.hasClass('is-open') ? 'true' : 'false'); $submenu.stop(true, true).slideToggle(150); }); });
CSS для вложенных уровней:
.menu .sub-menu { display: none; } .menu .has-submenu { position: relative; } .submenu-toggle { cursor: pointer; }
Для десктопа можно оставить раскрытие по hover, но для мобильного меню лучше использовать кнопку раскрытия. Третий уровень должен иметь отступ или отдельное визуальное выделение, иначе пользователь не поймёт вложенность. И проверьте, чтобы кнопка раскрытия не перекрывала саму ссылку.