Как скрыть элементы меню (см. сайт)?

12
Mahol
На сайте с 20.11.2016
Offline
96
431
Всем доброго дня. Есть сайт на Wordpress (а именно, мобильная версия). В меню подпункты указаны, но не скрываются. Как скрыть и отображать подпункты только по клику на пункт-родитель?
На скрине отмеченные пункты должны скрываться и показываться только по клику на "Лечение зубов". В настройках плагина AMP, который генерирует моб. версию, нет настроек для меню.
Ваш стоматолог плюс |
  • www.stomatologplus-vrn.ru
Стоматология в Воронеже представлена широко на любой вкус и достаток. Не просто выбрать ту клинику, которая будет полностью соответствовать высокому уровню предлагаемых услуг и качеству выполняемой работы. Чтобы не потеряться в многообразии и найти компетентных специалистов, многие читают разные источники, анализируют рейтинги, сравнивают...
jpg kizaxx88.jpg
jpg photo_2023-05-25_15-31-40.jpg
D.iK.iJ
На сайте с 26.05.2013
Offline
225
#1
Скрываете подменю стилями. Что-то вроде
#menu-item-2268 ul.sub-menu {display: none;}

Потом делаем так, чтобы ссылка в пункте родителе не занимала 100% ширины экрана.

#menu-item-2268 > a {display: inline-block; width: auto;}

Ну и скриптом сворачиваем / разворачиваем подпункт меню при клике на область справа.

<script>
$(document).ready(function(){
$("#menu-item-2268").click(function () {

$("#menu-item-2268 ul.sub-menu").slideToggle("fast");

});
});
</script>

Ну и дальше  для этого самого <li  id="menu-item-2268" задаем фон и  border-bottom. Можно добавить галочку " v " чтобы посетители поняли, что это именно меню. Да, код можно написать более универсальный и без ID, но мне лень. ))

Более простой способ - сразу добавить скрипт открытия меню,  пропуская другие пункты. А ссылку раздела сделать некликабельной через

#menu-item-2268 > a {pointer-events: none;}
Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
Mahol
На сайте с 20.11.2016
Offline
96
#2
D.iK.iJ #:

Ну и скриптом сворачиваем / разворачиваем подпункт меню при клике на область справа.

Спасибо за подробный ответ! 
Только скрипт почему-то не работает.

D.iK.iJ
На сайте с 26.05.2013
Offline
225
#3
Mahol #:
Только скрипт почему-то не работает.

Он под JQuery. По идее, для работы на сайте должен быть JQuery. Без него... ну только добавлять класс по клику и показывать меню, если класс есть.

document.getElementById('menu-item-2268').addEventListener('click', function() {
  this.classList.toggle('show');
});

и добавить стили

#menu-item-2268.show ul.sub-menu {display: block;} 

Через консоль проверял - работает. Если не будет - добавьте куда-то  ниже меню в коде.

Mahol
На сайте с 20.11.2016
Offline
96
#4

Подключил JS и всё заработало :)

Еще один момент, может, подскажешь: там два подменю - то есть, нужен еще один подуровень (см. скрин): Услуги >  подменю "Лечение зубов" > еще три подменю: "Лечение кариеса" и др 
Это вообще возможно сделать? У этих подменю одинаковый класс, если я правильно понимаю...

png 2023-05-31_09-43-07.png
D.iK.iJ
На сайте с 26.05.2013
Offline
225
#5

Ну давайте попробуем все с нуля собрать на классах:

#menu-amp .menu-item-has-children ul.sub-menu {display: none !important;}
#menu-amp .menu-item-has-children.show > ul.sub-menu {display: block !important;}
#menu-amp .menu-item-has-children {position: relative;background: #fafafa;border-bottom: 1px solid #efefef;}
#menu-amp .menu-item-has-children:after {content: ""; border: 5px solid transparent; border-top: 5px solid #b3b3b3; position: absolute; right: 12px; top: 21px; transition: transform 300ms;}
#menu-amp .menu-item-has-children.show:after {transform: rotate(90deg);}
#menu-amp .menu-item-has-children > a {display: inline-block; width: auto; border-bottom: none;}

И скриптом перебрать все нужные элементы

var elements = document.getElementsByClassName("menu-item-has-children");
var myFunction = function(event) {
event.stopPropagation();
this.classList.toggle("show");
};

for (var i = 0; i < elements.length; i++) {elements[i].addEventListener('click', myFunction, false);}

Не уверен, что все прямо 100% правильно, но через консоль работает.

Mahol
На сайте с 20.11.2016
Offline
96
#6
D.iK.iJ #:

Ну давайте попробуем все с нуля собрать на классах:

И скриптом перебрать все нужные элементы

Не уверен, что все прямо 100% правильно, но через консоль работает.


А из предыдущего кода нужно что-то удалять? Или просто добавить этот?
Если просто добавить, то не сработало :(

D.iK.iJ
На сайте с 26.05.2013
Offline
225
#7
Прошлое все убрать. И скрипт должен быть ниже меню в коде. Или подключаться уже после загрузки страницы.
Mahol
На сайте с 20.11.2016
Offline
96
#8
D.iK.iJ #:
Прошлое все убрать. И скрипт должен быть ниже меню в коде. Или подключаться уже после загрузки страницы.

Всё работает, большая благодарность.
И последний штрих - можно ли сдвинуть вправо элементы подменю? То есть, чтобы подменю не строго под заголовком выпадало.
Класс у них один, не понимаю, как переназначить. 

png 1.png
A1
На сайте с 23.11.2011
Offline
131
#9
Mahol #:

Всё работает, большая благодарность.
И последний штрих - можно ли сдвинуть вправо элементы подменю? То есть, чтобы подменю не строго под заголовком выпадало.
Класс у них один, не понимаю, как переназначить. 

На фото оно и так сдвинуто. 

D.iK.iJ
На сайте с 26.05.2013
Offline
225
#10
Mahol #:
Класс у них один, не понимаю, как переназначить. 

Вот можете прямо идти по вложенности до куда надо и все:

#menu-amp > li > .sub-menu {
padding-left: 40px;
}

Или может даже 

#menu-amp > li > .sub-menu > li {
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий