javascript - How to create menu responsive on click or on hover depend on device?

Question

I was creating a button with a and what I wanted is when I'm on a mobile device, I can click on the button and the menu appears. As we know, we can't hover on mobile devices But on a tab and higher devices, the menu should display on hover, not on click. codepen If I use onclick for mobile devices, then the menu stays on medium and above devices and If I remove onclick to work properly on medium and above devices then on mobile we can't click, as the only option left to open the menu is hover which we can't do in mobile devices. How to solve this problem. The only goal is to make a responsive design.

const btn = document.querySelector('.btn');
const list = document.querySelector('.list');

btn.addEventListener('click', () => {
  list.style.display = 'block';
})

.btn{
  margin: 0;
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: teal;
  color: white;
  font-size: 2rem;
  border-radius: 8px;
}

.list{
  display: none;
}

.btn:hover + .list{
    display: block;
  }
}

@media (min-width: 768px) {
  .btn{
    width: 50%;
  }
}

<a class="btn"> Names </a>

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

question from:https://stackoverflow.com/questions/65842156/how-to-create-menu-responsive-on-click-or-on-hover-depend-on-device

Answer 1

Here you go read about media queries in JavaScript and you can put a different onClick even based on the size of the window: https://www.w3schools.com/howto/howto_js_media_queries.asp