How to change expanding menu from hover to onclick?

Question

So basically I have this menu where when you hover your mouse over it, it expands. How can I rewrite my code so that it does this same but onclick (when clicked it will expand, when clicked again detract). Use of javascript is acceptable if neccessary, i've just been trying to do all of it in html and css.

html, body {
    font-family: Arial, Helvetica, sans-serif;
}

.navigation {
  width: 300px;
}

.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mainmenu a {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

.mainmenu a:hover {
    background-color: #C5C5C5;
}

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

.submenu a {
  background-color: #999;
}

.submenu a:hover {
  background-color: #666;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
        <li><a href="">Other</a>
      <ul class="submenu">
        <li><a href="">Contact us</a></li>
        <li><a href="">About us</a></li>
        <li><a href="">FAQ</a></li>
      </ul>
    </li>
  </ul>
</nav>

This will help https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — Ankit, Oct 27 '22 at 03:33

score 0 · Accepted Answer · answered Oct 28 '22 at 14:38

I read your question details carefully

You can try fix code following.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        html, body {
        font-family: Arial, Helvetica, sans-serif;
    }

    .navigation {
    width: 300px;
    }

    .mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    .mainmenu a {
    display: block;
    background-color: #CCC;
    text-decoration: none;
    padding: 10px;
    color: #000;
    }

    .mainmenu a:hover {
        background-color: #C5C5C5;
    }

    .mainmenu li.active .submenu {
    display: block;
    max-height: 200px;
    }

    .submenu a {
    background-color: #999;
    }

    .submenu a:hover {
    background-color: #666;
    }

    .submenu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
    }
</style>
<body>
    <nav class="navigation">
        <ul class="mainmenu">
          <li><a href="javascript:;" onclick="showSubMenu(event)">Products</a>
            <ul class="submenu">
              <li><a href="">Tops</a></li>
              <li><a href="">Bottoms</a></li>
              <li><a href="">Footwear</a></li>
            </ul>
          </li>
              <li><a href="javascript:;" onclick="showSubMenu(event)">Other</a>
            <ul class="submenu">
              <li><a href="">Contact us</a></li>
              <li><a href="">About us</a></li>
              <li><a href="">FAQ</a></li>
            </ul>
          </li>
        </ul>
      </nav>
</body>
<script>
    function showSubMenu(e) {
        e.target.parentNode.classList.toggle('active');
    }
</script>
</html>

Happy hacking!

How to change expanding menu from hover to onclick?

1 Answers1