How to hide side navigation when clicking on the html page instead of clicking on the hamburger menu?
I have a code that has a hamburger nav menu, and it transforms the three lines into an "X" close button, i want to add a code that allows me to hide the nav menu whenever the user clicks on the html page instead of just clicking on the "X" button
code:
<!DOCTYPE
html
>
<html
lang
="en">
<head>
<meta
charset
="UTF-8">
<meta
name
="viewport"
content
="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#
menu__toggle
{
opacity: 0;
}
#
menu__toggle
:
checked
~
.
menu__btn
>
span {
transform: rotate(45deg);
}
#
menu__toggle
:
checked
~
.
menu__btn
>
span::
before
{
top: 0;
transform: rotate(0);
}
#
menu__toggle
:
checked
~
.
menu__btn
>
span::
after
{
top: 0;
transform: rotate(90deg);
}
#
menu__toggle
:
checked
~
.
menu__box
{
visibility: visible;
left: 0;
}
.
menu__btn
{
display: flex;
align-items: center;
position: fixed;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.
menu__btn
>
span,
.
menu__btn
>
span::
before
,
.
menu__btn
>
span::
after
{
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #2e24e9;
transition-duration: .25s;
}
.
menu__btn
>
span::
before
{
content: '';
top: -8px;
}
.
menu__btn
>
span::
after
{
content: '';
top: 8px;
}
.
menu__box
{
display: block;
position: fixed;
visibility: hidden;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
transition-duration: .25s;
}
.
menu__item
{
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.
menu__item
:
hover
{
background-color: #CFD8DC;
}
</style>
</head>
<body>
<div
class
="hamburger-menu">
<input
id
="menu__toggle"
type
="checkbox" />
<label
class
="menu__btn"
for
="menu__toggle">
<span></span>
</label>
<ul
class
="menu__box">
<li><a
class
="menu__item"
href
="#">Page one</a></li>
<li><a
class
="menu__item" href="#">Page two</a></li>
</ul>
</div>
</body>
</html>