Hover effect when click on menu - html

Question

I have a menu in HTML with submenus that are displayed when hovering over the main button, but I would like to know if it is possible to make the submenus appear when click on the button.
*Configurações Padrões*/ ul.menu,
.menu li,
.menu a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
ul.menu ul {
position: absolute;
display: none;
}
ul.menu {
float: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
padding: 0 5px;
margin: 0px -8px;
width: 100%;
position: fixed;
bottom: 0;
}
/* Configurações nivel 1*/
.menu li {
float: left;
width: auto;
position: relative;
}
.menu li a {
display: block;
padding: 0 20px;
line-height: 45px;
height: 45px;
float: left;
}
/* Configurações nivel 2*/
.menu li:hover>ul.submenu-1 {
display: block;
top: -145px;
left: 0;
padding: 5px;
width: 200px;
}
.menu ul.submenu-1 a {
width: 160px;
padding: 0 20px;
}
/* Configurações nivel 2*/
.menu li:hover>ul.submenu-2 {
display: block;
top: 0;
left: 135px;
padding: 5px;
width: 200px;
}
.menu ul.submenu-2 a {
width: 140px;
padding: 0 20px;
}
/* Configurações nivel 3*/
.menu li:hover>ul.submenu-3 {
display: block;
top: 0;
left: 195px;
padding: 5px;
width: 200px;
}
.menu ul.submenu-3 a {
width: 160px;
padding: 0 20px;
}
/*Configurações de cores*/
/*nivel 1*/
.menu {
background: #CCC;
}
.menu a {
color: #000;
}
.menu li:hover>a {
background: #999;
color: #fff;
}
/*nivel 2*/
.submenu-1 {
background: #999;
}
.submenu-1 a {
color: #fff;
}
.submenu-1 li:hover>a {
background: #666;
}
/*nivel 3*/
.submenu-2 {
background: #666;
}
.submenu-2 a {
color: #fff;
margin-top: -4px;
}
.submenu-2 li:hover>a {
background: #333;
}
/*nivel 3*/
.submenu-3 {
background: #333;
}
.submenu-3 a {
color: #fff;
}
.submenu-3 li:hover>a {
background: #000;
}
.menuul li:hover,
ul li.active {}
<ul class="menu">
<li>Iniciar
<ul class="submenu-1">
<li>Submenu 1
<ul class="submenu-3">
<li>Submenu 7</li>
<li>Submenu 8</li>
<li>Submenu 9</li>
</ul>
</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<ul class="submenu-2">
<li>Submenu 4</li>
<li>Submenu 5</li>
<li>Submenu 6</li>
</ul>
</li>
</ul>
</li>
</ul>
I need something like the windows98 style button of this site:
http://osrollers.tumblr.com/

Answer 1

Add a click event to the list element.
Toggle the desired element with a CSS class via classList.toggle().
var menuLi = document.querySelector(".menu li");
var submenu1 = document.querySelector(".submenu-1");
menuLi.addEventListener("click", function() {
submenu1.classList.toggle("toggle-submenu-1");
});
*Configurações Padrões*/ ul.menu,
.menu li,
.menu a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
ul.menu ul {
position: absolute;
display: none;
}
ul.menu {
float: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
padding: 0 5px;
margin: 0px -8px;
width: 100%;
position: fixed;
bottom: 0;
}
/* Configurações nivel 1*/
.menu li {
float: left;
width: auto;
position: relative;
}
.menu li a {
display: block;
padding: 0 20px;
line-height: 45px;
height: 45px;
float: left;
}
/* Configurações nivel 2*/
.toggle-submenu-1 {
display: block !important;
top: -145px;
left: 0;
padding: 5px;
width: 200px;
}
/*.menu li:hover>ul.submenu-1 {
display: block;
top: -145px;
left: 0;
padding: 5px;
width: 200px;
}*/
.menu ul.submenu-1 a {
width: 160px;
padding: 0 20px;
}
/* Configurações nivel 2*/
.menu li:hover>ul.submenu-2 {
display: block;
top: 0;
left: 135px;
padding: 5px;
width: 200px;
}
.menu ul.submenu-2 a {
width: 140px;
padding: 0 20px;
}
/* Configurações nivel 3*/
.menu li:hover>ul.submenu-3 {
display: block;
top: 0;
left: 195px;
padding: 5px;
width: 200px;
}
.menu ul.submenu-3 a {
width: 160px;
padding: 0 20px;
}
/*Configurações de cores*/
/*nivel 1*/
.menu {
background: #CCC;
}
.menu a {
color: #000;
}
.menu li:hover>a {
background: #999;
color: #fff;
}
/*nivel 2*/
.submenu-1 {
background: #999;
}
.submenu-1 a {
color: #fff;
}
.submenu-1 li:hover>a {
background: #666;
}
/*nivel 3*/
.submenu-2 {
background: #666;
}
.submenu-2 a {
color: #fff;
margin-top: -4px;
}
.submenu-2 li:hover>a {
background: #333;
}
/*nivel 3*/
.submenu-3 {
background: #333;
}
.submenu-3 a {
color: #fff;
}
.submenu-3 li:hover>a {
background: #000;
}
.menuul li:hover,
ul li.active {}
<ul class="menu">
<li>Iniciar
<ul class="submenu-1">
<li>Submenu 1
<ul class="submenu-3">
<li>Submenu 7</li>
<li>Submenu 8</li>
<li>Submenu 9</li>
</ul>
</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<ul class="submenu-2">
<li>Submenu 4</li>
<li>Submenu 5</li>
<li>Submenu 6</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 2

If you want activate the submenus on click, instead of mouse over, you have to use a small JavaScript code.
Please, see the comments in the snippet!
// collect each menu item
const links = document.querySelectorAll(".menu>li>a");
// run a loop
for (let i=0; i<links.length; i++)
{
// to bind a click event listener to each menu item
links[i].addEventListener("click", function()
{
// do stuff only if the current item has a submenu
if (this.nextSibling != null)
{
// cache the submenu of the current item
let submenu = this.nextSibling.nextSibling;
// check if the submenu is already visible
if (submenu.classList.contains("active"))
{
// if so, hide it
submenu.classList.remove("active");
}
else
{
// if not, show it
submenu.classList.add("active");
}
}
});
}
.submenu {
display: none;}
.submenu.active {
display: block;}
<ul class="menu">
<li>Main
<ul class="menu submenu">
<li>1
<ul class="menu submenu">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>2</li>
<li>3
<ul class="menu submenu">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</li>
</ul>