Отображение выпадающего списка по клику, а не при наведении

Question

Я использую тему Avada (fusion-theme) на Wordpress для моего сайта (в разработке).

У них есть опция мегаменю, которую я использую, но я бы хотел, чтобы она появлялась, когда кто-то нажимал на элемент главного меню, а не наводил курсор на него.

Сайт: www.paradigmtek.com

Так что прямо сейчас, если кто-то наведет курсор на «умный дом» вверху, появится подменю (техническая поддержка умного дома, умный настройка концентратора или динамика и т. д. c.). Но я бы хотел, чтобы он появлялся при нажатии, а не при наведении.

Не думаю, что для этого потребуется не простой CSS трюк, а JS.

Кто-нибудь имеет опыт работы с этой темой или знает, как это сделать?

Answer 1

Вы можете просто добавить класс, чтобы изменить непрозрачность раскрывающегося меню при нажатии на одно из меню. В этом примере ниже я добавляю show class к dropdown, чтобы изменить непрозрачность от 0 до 1 при нажатии на меню. В то же время я добавляю класс в выбранное меню (например, clicked), чтобы придать ему акцентный цвет, указывающий, что это меню, по которому щелкают.

const menus = document.querySelectorAll('.menu')
const dropdown = document.querySelector('.dropdown')
let activeMenu = null

menus.forEach(menu => {
  menu.addEventListener('click', e => {
    // Removing previous active menu that is not itself
    if (activeMenu && activeMenu !== menu) {
      activeMenu.classList.remove('clicked')
      activeMenu = menu
    }
    else if (activeMenu && activeMenu === menu) {
      activeMenu = null
    } else {
      activeMenu = menu
    }
    
    menu.classList.toggle('clicked')
    // If there is an active menu, show
    if (activeMenu) dropdown.classList.add('show')
    else dropdown.classList.remove('show')
  })
})

* {
  box-sizing: border-box;
  font-family: Helvetica;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  background: #121212;
}

.menu {
  color: white;
  margin: 20px;
  padding: 20px;
  border-radius: 5px;
  cursor: pointer;
}

.menu:hover {
  color: #ff8888;
}

.menu.clicked {
  color: #ff8888;
}

.dropdown {
  width: 100%;
  height: 100px;
  background: #333333;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.dropdown.show {
  opacity: 1;
}

.line {
  width: 100%;
  height: 3px;
  background: #00a5ff;
}

<div class="container">
  <div class="menu">Menu 1</div>
  <div class="menu">Menu 2</div>
  <div class="menu">Menu 3</div>
  <div class="menu">Menu 4</div>
</div>

<div class="dropdown">
  <div class="line"></div>
</div>