CODEWITHSUNDEEP
javascripthtmlcsswordpress
sci-guy
sci-guy

Reputation: 2614

Showing a dropdown on click instead of on hover

I am using Avada (fusion-theme) theme on Wordpress for my website (under construction).

They have a mega-menu option that I am using, but I would want it to appear when someone clicks on the main-menu item instead of hovering over it.

Site: www.paradigmtek.com

So right now if someone hovers over say "smart home" at the top, the sub menu appears (smart home tech support, smart hub or speaker setup, etc.). But I would like it to appear on click instead of on hover.

I don't think this will require not a simple CSS trick, but a JS one.

Anyone has experience with that theme or know how to do it?

Upvotes: 0

Views: 2945

Answers (2)

loquace
loquace

Reputation: 1129

In the options: avada options -> menu -> submenu You just have to specify hover / click with the select button.

You can also build your own menu by creating a layout -> avada -> layout

In your layout you can add a menu element on which you apply the wanted options.

Getting Started With Avada Layouts

Understanding Custom Headers

How To Use The Menu Element

Upvotes: 0

Richard
Richard

Reputation: 7443

You can simply add a class to change the opacity of the dropdown menu upon clicking one of the menus. In this example below, I'm adding show class to dropdown to change opacity from 0 to 1 upon clicking the menu. At the same time, I'm addding a class to the clicked menu (i.e. clicked) to give it an accent colour to indicate that it is the menu being 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>

Upvotes: 1

Related Questions