Retractable menu that does not close

Question

Retractable menu that does not close

Asked 6 years, 8 months ago

Viewed 124 times

2

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

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

I know html and css. Javascript I’m having contact with it now so I don’t really know 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);
            }

Have the JS to put here too? So someone could test with the Snippet.

– William Aparecido Brandino

2018/04/12 at 19:52
So I didn’t use JS, there’s some way to do it without?

– T.Drumond

2018/04/12 at 19:56
I would like a solution using JS or jQuery?

– Sam

2018/04/12 at 21:05
It would be in jQuery itself.

– T.Drumond

2018/04/13 at 20:46

1 answer

Browser other questions tagged html css menu

You are not signed in. Login or sign up in order to post.

by Diego Marques • **3,701** points · Answer 1 · 2018-04-12T19:55:07+00:00

Hello,

For this type of menu you can only with CSS, with the pseudo-class:Focus, because it applies to the element when it is clicked, and when we click outside or on another element, it loses the state of focus, thus removing the style applied. 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>