I have a retractable menu, but I can only get it open but not close.
I need it to close when clicking anywhere on the screen outside the menu.
I know about html and css. Javascript is getting in touch with it now so I do not know how to say anything about it.
HTML:
<body>
<input type="checkbox" id="check">
<label for="check" class="menu-icon">☰</label>
<div class="backg"></div>
<nav class="menu" id="principal">
<ul>
<li><a href="" class="voltar">Voltar</a></li>
<li><a href="">Home</a></li>
<li><a href="">Fórum</a></li>
<li><a href="">Cursos <span>+</span></a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Contato <span>+</span></a></li>
</ul>
</nav>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 50px;
top: 0;
left: 0;
background-color: #5b8594;
position: fixed;
}
.menu-icon{
position: fixed;
font-size: 25px;
font-weight: bold;
padding: 5px;
width: 40px;
height: 40px;
text-align: center;
background-color: #5b8594;
color: #fff;
cursor: pointer;
transition: all .4s;
left: 300px;
top: 0;
}
.menu-icon:hover{
background-color: #fff;
color: #5b8594;
cursor: pointer;
transition: all .4s;
left: 300px;
top: 0;
}
#check {
position: absolute;
z-index: 100;
}
.menu {
height: 100%;
position: fixed;
background-color: #222;
top:0;
overflow: hidden;
transition: all .2s;
}
#principal {
width: 300px;
left: -300px;
}
ul {
list-style: none;
}
ul li a{
display: block;
font-size: 18px;
font-family: 'Arial';
padding: 10px;
border-bottom: solid 1px #000;
color: #ccc;
text-decoration: none;
transition: all 0.2s;
}
ul li span{
float: right;
padding-right: 10px;
}
ul li a:hover{
background-color: #5b8594;
}
.voltar{
margin-top: 60px;
background-color: #111;
border-left: solid 5px #444;
}
.backg {
width: 100%;
height: 100%;
left: 0;
top:0;
position: fixed;
background-color: rgba(0,0,0,.6);
display: none;
}
#check:checked ~.backg{
display: block;
}
#check:checked ~ #principal{
transform: translateX(300px);
}