Отключить «паразитное» поведение ссылок в меню навигации

У меня есть сайт Worpress с установленной темой JetOne.

Когда я щелкаю элемент корневого меню в главном меню навигации, чтобы открыть его элементы (ссылки в этом корневом элементе), также срабатывает действие щелчка для выбранной ссылки (корневой элемент), в этом дело. Проблема присутствует в мобильном представлении для этой темы. я уже пробовал

@media (max-width: 768px) {
  .ct-main-navigation > .menu-item > a {
    pointer-events: none;
  }
}

Но этот трюк просто отключает ссылку для корневых элементов меню. Как правильно достичь цели?

Есть еще идея: пересоздать навигацию с помощью хука wp_nav_menu_items, но я не хочу ломать оригинальный дизайн и не знаю, как именно это сделать.

HTML

<nav id="ct-main-nav__wrapper" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul id="menu-menu" class="ct-main-navigation"><li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"><a href="https://demo.curlythemes.com/private-jet/services/">Services</a>
<ul class="sub-menu">
<li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333"><a href="https://demo.curlythemes.com/private-jet/services/private-jet-2/">Private Jet Charters</a></li>
<li id="menu-item-409" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-409"><a href="https://demo.curlythemes.com/private-jet/services/business-jets/">Business Jets Charters</a></li>
<li id="menu-item-410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-410"><a href="https://demo.curlythemes.com/private-jet/services/helicopter-charters/">Helicopter Charters</a></li>
<li id="menu-item-408" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-408"><a href="https://demo.curlythemes.com/private-jet/services/air-taxi-services/">Air Taxi Services</a></li>
</ul>
</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-78"><a href="https://demo.curlythemes.com/private-jet/about-us/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-299" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-299"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-values">Our Values</a></li>
<li id="menu-item-300" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-history">Our History</a></li>
<li id="menu-item-301" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-301"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-fleet">Our Fleet</a>
<ul class="sub-menu">
<li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">CESSNA 208 GC</a></li>
<li id="menu-item-304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">DE HAVILLAND DHC-8-200</a></li>
<li id="menu-item-396" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-396"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">BOMBARDIER JET 200</a></li>
<li id="menu-item-397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-397"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">EMBRAER 175</a></li>
</ul>
</li>
<li id="menu-item-302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-302"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-team">Our Team</a></li>
</ul>
</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="https://demo.curlythemes.com/private-jet/empty-legs/">Empty Legs</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="https://demo.curlythemes.com/private-jet/news/">News</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="https://demo.curlythemes.com/private-jet/contact/">Contact</a></li>
</ul> </nav>

Исходный CSS

.ct-main-navigation .menu-item-has-children > a::before,
.ct-main-navigation .page_item_has_children > a::before {
  content: "";
  position: relative;
  font-family: 'themify';
  display: inline-block;
  -webkit-transition: opacity 100ms ease-in;
   transition: opacity 100ms ease-in; 
}

.ct-main-navigation .menu-item-has-children > a::before,
.ct-main-navigation .page_item_has_children > a::before {
  float: right;
  margin: 0 0.5rem;
  display: inline-block; }
  @media (min-width: 48em) {
    .ct-main-navigation .menu-item-has-children > a::before,
    .ct-main-navigation .page_item_has_children > a::before {
      font-size: 0.5rem;
      line-height: 2.25;
      margin-right: 0; 
      } }

@media (min-width: 576px) {
  .ct-main-navigation .menu-item .menu-item-has-children > a::before,
  .ct-main-navigation .page_item .page_item_has_children > a::before {
    content: '\e649';
    line-height: 2.2;
    } }

.ct-main-navigation a {
  text-decoration: none;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  display: block;
  padding: 0.25rem 0; }

P.S. Другим обходным путем для предметной проблемы является создание CSS следующим образом.

Измененный CSS

@media (max-width: 768px) {
  .ct-main-navigation .menu-item-has-children::before,
  .ct-main-navigation .page_item_has_children::before {
    position: absolute;
    right: 0px;
    height: 100%;
    padding-right: 10px;
    padding-top: 7px;
    top: 0;
    z-index: 5;
    width: 40px;
    text-align: right;
    content: '';
    font-family: 'themify';
    display: inline-block;
    -webkit-transition: opacity 100ms ease-in;
    transition: opacity 100ms ease-in;
  }
  .ct-main-navigation .menu-item-has-children > a::before,
  .ct-main-navigation .page_item_has_children > a::before {
    display: none;
  }
}

Как сделать фикс универсальным не только для Android устройств, но и для iOS?

Текущее исправление CSS нарушает разметку меню навигации на устройствах iPad (iOS).


wordpress html css pseudo-class
person Twissell    schedule 23.02.2021    source источник
comment
Это предложение не имеет для меня смысла -› When I click root menu element in the main navigation menu to open it click action for selected link also triggered that's the matter.   -  person Mr T    schedule 23.02.2021
comment
Можете ли вы показать образец структуры? Обычно у вас есть ссылка на корневой элемент, а затем вы создаете дополнительные элементы вне этой ссылки, чтобы открыть подменю.   -  person Justinas    schedule 23.02.2021
comment
@Justinas готово. Я добавил оригинальную разметку и стиль.   -  person Twissell    schedule 23.02.2021
comment
@MrT, это означает, что элемент корневого меню также имеет ссылку. Итак, первая роль корневого элемента навигационного меню — контейнер выпадающего меню. Второй - гиперссылка на какую-то страницу на сайте.   -  person Twissell    schedule 23.02.2021
comment
Думаю, это дизайнерское решение. На данный момент корневая ссылка занимает все пространство внутри элемента <li>, поэтому, когда вы нажимаете на нее, вы перенаправляетесь в расположение ссылки. Мне приходит в голову одно предложение: переместить значок из css в элемент <img /> или <i />, сделать его больше для сенсорных устройств и при нажатии развернуть подменю, в противном случае перейти к расположению ссылки.   -  person Mr T    schedule 23.02.2021
comment
@MrT, спасибо! Мне кажется, ты прав. Не могли бы вы оказать мне услугу и записать свою идею в качестве ответа с примером, пожалуйста?   -  person Twissell    schedule 23.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

В соответствии с запросом, вот минимальный пример возможного решения:

const icon = document.querySelector('.chevron-down');

/* for mobile devices you may also use "touchend" event */
icon.addEventListener('click', (e) => {
  const subMenu = e.currentTarget.nextElementSibling;

  subMenu.style.display = 'block'
});
ul {
  list-style: none;
}

ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

i.chevron-down:before {
  content: "";
  position: relative;
  font-family: themify;
  display: inline-block;
  -webkit-transition: opacity 100ms ease-in;
  transition: opacity 100ms ease-in;
  font-style: normal;
}

.sub-menu {
  display: none;
  flex-basis: 100%;
}
<ul>
  <li>
    <a href="https://demo.curlythemes.com/private-jet/services/">Services</a>
    <i class="chevron-down"></i>
    <ul class="sub-menu">
      <li>Private etc.</li>
    </ul>
  </li>
</ul>

Это не полностью рабочее решение и требует настройки, однако оно должно помочь вам начать работу.

person Mr T    schedule 24.02.2021