Menu dropdown in html, css and js from mobile and desktop

Question

i refer to this thread: JS using onclick event on li to display block

From desktop is ok but how do i do the same thing but that from the mobile you can touch the "disappearing" menu and make sure that it remains visible until the next touch?

I'm currently using this code here:

function dropdown() {
  document.getElementById("Menuitems").style.display = "block";
}

#dropdown ul {
  display: block;
  transition-duration: 1s;
}

#dropdown ul li {
  display: block;
  background-color: #212121;
  color: #ffffff;
}

#dropdown ul li ul {
  display: none;
}

#dropdown ul li:hover>ul {
  /*this is what the onclick event should do*/
  display: block;
}

<div id="dropdown">
  <ul>
    <li onclick="dropdown()"><a>Menu</a>
      <ul id="Menuitems">
        <li><a href="">item 1</a> </li>
        <li><a href="">item 2</a> </li>
        <li><a href="">item 3</a> </li>
      </ul>
    </li>
  </ul>
</div>

Please take a moment to take the tour and read How to Ask. You need to provide at least an illustration of what you mean by "disappearing" menu. The code in that question immediately shows or hides the clicked menu's submenu, unless you add some CSS or otherwise alter the code in some way. Please edit your question to include the code you are using. — Heretic Monkey
– Heretic Monkey, Commented Feb 10, 2022 at 21:30
Thanks and sorry for my mistake. I insert the code, css and js script. — Gandalf
– Gandalf, Commented Feb 10, 2022 at 21:34
the mobile phone works like this, to open the menu you have to touch the navigation bar, the phone doesn't have a mouse you can't use the hover — Sergiu
– Sergiu, Commented Feb 10, 2022 at 21:59
Yes of course but the problem still remain, how can i solve? — Gandalf
– Gandalf, Commented Feb 11, 2022 at 9:07

Ashish Bhattarai · Accepted Answer · 2022-02-10 22:06:06Z

0

I just added an active class onclick .. the active class toggles on every click. and just add the same hover effect to active class

function dropdown() {
  document.getElementById("Menuitems").classList.toggle("active");
}

#dropdown ul {
  display: block;
  transition-duration: 1s;
}

#dropdown ul li {
  display: block;
  background-color: #212121;
  color: #ffffff;
}

#dropdown ul li ul {
  display: none;
}

#dropdown ul li:hover>ul,
#dropdown ul li>ul.active{
  /*this is what the onclick event should do*/
  display: block;
}

<div id="dropdown">
  <ul>
    <li onclick="dropdown()"><a>Menu</a>
      <ul id="Menuitems">
        <li><a href="">item 1</a> </li>
        <li><a href="">item 2</a> </li>
        <li><a href="">item 3</a> </li>
      </ul>
    </li>
  </ul>
</div>

answered Feb 10, 2022 at 22:06

Ashish Bhattarai

1509 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Menu dropdown in html, css and js from mobile and desktop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related