Retractable Menu that does not close

Question

Retractable Menu that does not close

I have a retractable menu, but I can only make it open, but not close.

I need it to close by clicking anywhere on the screen outside the menu.

I know html and css. the Javascript I'm having contact with it now so I don't know how well to say anything about.

HTML:

  <body>
    <input type="checkbox" id="check">
    <label for="check" class="menu-icon">&#9776;</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);
            }

2

html css menu

Author: William Aparecido Brandino, 2018-04-12

Source

1 answers

score 2 · Accepted Answer

Hello,

For this type of menu you get only with CSS, with the pseudo-class:focus, since it applies to the element when it is clicked, and when we click outside or on another element, it loses the focus state, thus removing the applied style. Example:

body {
  font-family: "Open Sans", sans-serif;
}
.popup-menu {
  background: #f5f5f5;
  display: none;
  margin: 0;
  padding: 15px;
  width: 150px;
}
.bt-menu:focus + .popup-menu {
  display: block;
}
.popup-menu li {
  list-style: none;
}
.popup-menu a {
  display: block;
  text-align: center;
  text-transform: uppercase;
  padding: 5px 0;
}
.popup-menu a:hover {
  background: #fff;
}

<button class="bt-menu">Menu</button>
<ul class="popup-menu">
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
  <li><a href="">Item 4</a></li>
</ul>