Full Menu in Jquery

Question

So people, I need a help with Jquery to make this menu.

I have a div that is activated when the menu item is clicked, but I still need some adjustments to make it round, and what I need is:

• Make it not possible to display more than one of the Ivs at the same time time.
• Make clicking outside the div close the menu.

I have the following code :

$(document).ready(function() {
$('.menu-aberto').hide();
      $('a.destaque').click(
          function() {	
              $('a.destaque').removeClass('active');
              $(this).addClass('active');
              var mostraMenu = $(this).attr('rel');

              if ($('#' + mostraMenu).css("display") == "block") {
                  $('#' + mostraMenu).css('display', 'none');
                  $(this).next('#' + mostraMenu).hide();
                  $('a.active').removeClass('active');
              } else {
                  $('#' + mostraMenu).css('display', 'block');

              }
              return false;
          });

  });

body {
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
}
.container-menu {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Source Sans Pro', sans-serif;
}

.contatos {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-left: 200px;
}

.contatos p {
    font-size: 18px;
}


.menu {
    width: 500px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.destaque {
    color: #ff0000!important;
}



.menu ul {
    display: flex;
    list-style: none;

}

.menu li {
    padding: 23px 10px;
}

.menu a {
    text-decoration: none;
    color: #606060;
    font-weight: bold;
}

.sub-divisao-menu {
    top: 5px;
    order: 1;

}
.fundo {
    position: relative;
    z-index: 999;
    left: 0;
    background: url("img/fundo.png"), pink;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 250px;
    font-family: 'Source Sans Pro', sans-serif;
}


.container > h3 {
    font-family: 'Source Sans Pro', sans-serif;
    color: red;
    font-size: 24px;
    display: flex;
    flex-direction: row;
    width: 850px;
    justify-content: flex-start;
    margin-top: 15px;
    position: absolute;

}

.sub-divisao-menu li {
    padding: 1px 0!important;
    list-style: none;


}

.sub-divisao-menu li:before {
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

.sub-divisao-menu a {
    text-decoration: none;
    color: #606060;
}

/*set up the downward arrow for top level items*/

.destaque:after {
    content: "▼";
    margin-left: 5px;
}

#blog>a:after {
    content: "▼";
    margin-left: 5px;
}

.active {
    background: #e5e5e5;
    top: 0;
    padding: 23px 15px;
}

.contatos img {
    width: 23px;
    height: 23px;
    display: flex;
    margin: 0 5px;
}

.contatos p {
    margin-right: 10px;
    font-size: 18px;
}

#logo {
    width: 70px!important;
    height: auto;
    margin: 5px;
    margin-right: 30px;
}

#divisor {
    display: block;
    height: 90%;
    background: #ccc;
    width: 3px;
    top: 15px;
    display: flex;
    order: 2!important;
    position: absolute;
}

.termos {
    width: 360px;
    top: 5px;
    display: flex;
    flex-direction: column;
    word-break: keep-all;
    line-height: 27px;
    order: 3;
    font-family: 'Sourco Sans Pro', sans-serif;
    font-size: 13px;
}
.termos p{
    color: #7c7c7c;
    font-weight: bold;
}
.termos a {
    color: red;
    text-decoration: none;
    background: white;
    padding: 1px 3px;
    border: 2px solid white;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 300;
    margin: 0 1px;

}

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 850px;
    justify-content: space-around;
    margin-top: 5px;
}
.size{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;

}
.sub-divisao-menu,
.termos{
    margin-top: 50px;
}

   .menu-aberto {
    display: none;
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}
      

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-menu">
  <nav class="menu">
  <ul>
          <li><a class="destaque" rel="infra" href="#">Infra</a></li>
          <li><a class="destaque" rel="web" href="#">Web</a>
          </li>
          <li><a href="#">Quem somos</a></li>
          <li id="blog"><a href="#">Blog</a></li>
          <li><a href="#">Contato</a></li>
      </ul>
  </nav>
  <div class="contatos">
      <p>(47) 3522-6664</p>

  </div>
</div>
<div id="infra" class="fundo menu-aberto">
    <div class="container">
         <h3>Infraestrutura Corporativa</h3>
        <ul class="sub-divisao-menu">
            <li><a href="#">Servidores</a></li>
            <li><a href="#">Redes</a></li>
            <li><a href="#">Backups</a></li>
            <li><a href="#">Suporte técnico</a></li>
            <li><a href="#">Monitoramento</a></li>
        </ul>
        <ul class="sub-divisao-menu">
            <li><a href="#">Licenciamento de softwares</a></li>
            <li><a href="#">Locação de equipamentos</a></li>
            <li><a href="#">Consultoria</a></li>
        </ul>

        <span id="divisor"></span>
        <div class="termos">
            <p>Buscar por termos:</p>
            <p><a href="">Cloud</a>
                <a href="">SLA</a>
                <a href="">Storage</a>
                <a href="">Service Desk</a>
                <a href="">Hardware</a>
                <a href="">Locação de Computadores</a>
                <a href="">VPN</a>
                <a href="">Software</a>
                <a href="">Cabiamento Estruturado</a>
                <a href="">CPD</a>
                <a href="">Infraestrutura</a>
                <a href="">Data Center</a>
                <a href="">Backup de Dados</a>
                <a href="">Outsourcing</a>
                <a href="">Locação de Servidor</a></p>
        </div>
    </div>
   </div>
   <div id="web" class="fundo menu-aberto">
    <div class="container">
      <h3>Web e Design</h3>
           <ul class="sub-divisao-menu">
                    <li><a href="#">E-Commerce</a></li>
                    <li><a href="#">Website</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Marketing Digital</a></li>
                    <li><a href="#">Redes Sociais</a></li>
        </ul>
        <ul class="sub-divisao-menu">
                    <li><a href="#">Hospedagem de sites</a></li>
            </ul>
        <span id="divisor"></span>
         <div class="termos">
            <p>Buscar por termos:</p>
            <p><a href="">Cloud</a>
                <a href="">SLA</a>
                <a href="">Storage</a>
                <a href="">Service Desk</a>
                <a href="">Hardware</a>
                <a href="">Locação de Computadores</a>
                <a href="">VPN</a>
                <a href="">Software</a>
                <a href="">Cabiamento Estruturado</a>
                <a href="">CPD</a>
                <a href="">Infraestrutura</a>
                <a href="">Data Center</a>
                <a href="">Backup de Dados</a>
                <a href="">Outsourcing</a>
                <a href="">Locação de Servidor</a></p>
        </div>
    </div>
</div>

Answer 1

Very simple! Just check if it was clicked out of the container and perform an action

$(document).mouseup(function(e){
    var container = $(".menu-aberto > .container");
    if(!container.is(e.target) && container.has(e.target).length === 0){
        $('a.destaque').removeClass('active');
        $('.menu-aberto').hide(); //ou adicionar uma classe/remover uma classe, por exemplo
    }
});

Answer 2

Use the method toggle that your code becomes more efficient and clean.

To close everything by clicking off the menu, use the event onclick in the document and put stopPropagation(); in the onclick from the menu window, to prevent the menu from closing by clicking on it.

See working:

$(document).ready(function() {
   $('a.destaque').click(function(){

      $(this).toggleClass('active')
      $('a.destaque').not($(this)).removeClass('active');
      var mostraMenu = $(this).attr('rel');
      $('.menu-aberto').not($('#' + mostraMenu)).hide();
      $('#' + mostraMenu).toggle();
      return false;
   });

}).on("click", function(){
   $('.menu-aberto').hide();
   $('a.active').removeClass('active');
});

$('.menu-aberto').click(function(e){
   e.stopPropagation();
});

body {
            overflow-x: hidden;
        }

        * {
            margin: 0;
            padding: 0;
        }
        .container-menu {
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Source Sans Pro', sans-serif;
        }

        .contatos {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-left: 200px;
        }

        .contatos p {
            font-size: 18px;
        }


        .menu {
            width: 500px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

        }

        .destaque {
            color: #ff0000!important;
        }



        .menu ul {
            display: flex;
            list-style: none;

        }

        .menu li {
            padding: 23px 10px;
        }

        .menu a {
            text-decoration: none;
            color: #606060;
            font-weight: bold;
        }

        .sub-divisao-menu {
            top: 5px;
            order: 1;

        }
        .fundo {
            position: relative;
            z-index: 999;
            left: 0;
            background: url("img/fundo.png"), pink;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100vw;
            height: 250px;
            font-family: 'Source Sans Pro', sans-serif;
        }


        .container > h3 {
            font-family: 'Source Sans Pro', sans-serif;
            color: red;
            font-size: 24px;
            display: flex;
            flex-direction: row;
            width: 850px;
            justify-content: flex-start;
            margin-top: 15px;
            position: absolute;
            
        }

        .sub-divisao-menu li {
            padding: 1px 0!important;
            list-style: none;
            

        }

        .sub-divisao-menu li:before {
            content: "";
            border-color: transparent #111;
            border-style: solid;
            border-width: 0.35em 0 0.35em 0.45em;
            display: block;
            height: 0;
            width: 0;
            left: -1em;
            top: 0.9em;
            position: relative;
        }

        .sub-divisao-menu a {
            text-decoration: none;
            color: #606060;
        }

        /*set up the downward arrow for top level items*/

        .destaque:after {
            content: "▼";
            margin-left: 5px;
        }

        #blog>a:after {
            content: "▼";
            margin-left: 5px;
        }

        .active {
            background: #e5e5e5;
            top: 0;
            padding: 23px 15px;
        }

        .contatos img {
            width: 23px;
            height: 23px;
            display: flex;
            margin: 0 5px;
        }

        .contatos p {
            margin-right: 10px;
            font-size: 18px;
        }

        #logo {
            width: 70px!important;
            height: auto;
            margin: 5px;
            margin-right: 30px;
        }

        #divisor {
            display: block;
            height: 90%;
            background: #ccc;
            width: 3px;
            top: 15px;
            display: flex;
            order: 2!important;
            position: absolute;
        }

        .termos {
            width: 360px;
            top: 5px;
            display: flex;
            flex-direction: column;
            word-break: keep-all;
            line-height: 27px;
            order: 3;
            font-family: 'Sourco Sans Pro', sans-serif;
            font-size: 13px;
        }
        .termos p{
            color: #7c7c7c;
            font-weight: bold;
        }
        .termos a {
            color: red;
            text-decoration: none;
            background: white;
            padding: 1px 3px;
            border: 2px solid white;
            border-radius: 4px;
            font-size: 15px;
            font-weight: 300;
            margin: 0 1px;
            
        }

        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 850px;
            justify-content: space-around;
            margin-top: 5px;
        }
        .size{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 15px;
            
        }
        .sub-divisao-menu,
        .termos{
            margin-top: 50px;
        }
        
           .menu-aberto {
            display: none;
            /* display: flex; */
            justify-content: center;
            flex-direction: row;
            width: 100%;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-menu">
        <nav class="menu">
        <ul>
                <li><a class="destaque" rel="infra" href="#">Infra</a></li>
                <li><a class="destaque" rel="web" href="#">Web</a>
                </li>
                <li><a href="#">Quem somos</a></li>
                <li id="blog"><a href="#">Blog</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </nav>
        <div class="contatos">
            <p>(47) 3522-6664</p>
            
        </div>
    </div>
 <div id="infra" class="fundo menu-aberto">
            <div class="container">
                 <h3>Infraestrutura Corporativa</h3>
                <ul class="sub-divisao-menu">
                    <li><a href="#">Servidores</a></li>
                    <li><a href="#">Redes</a></li>
                    <li><a href="#">Backups</a></li>
                    <li><a href="#">Suporte técnico</a></li>
                    <li><a href="#">Monitoramento</a></li>
                </ul>
                <ul class="sub-divisao-menu">
                    <li><a href="#">Licenciamento de softwares</a></li>
                    <li><a href="#">Locação de equipamentos</a></li>
                    <li><a href="#">Consultoria</a></li>
                </ul>

                <span id="divisor"></span>
                <div class="termos">
                    <p>Buscar por termos:</p>
                    <p><a href="">Cloud</a>
                        <a href="">SLA</a>
                        <a href="">Storage</a>
                        <a href="">Service Desk</a>
                        <a href="">Hardware</a>
                        <a href="">Locação de Computadores</a>
                        <a href="">VPN</a>
                        <a href="">Software</a>
                        <a href="">Cabiamento Estruturado</a>
                        <a href="">CPD</a>
                        <a href="">Infraestrutura</a>
                        <a href="">Data Center</a>
                        <a href="">Backup de Dados</a>
                        <a href="">Outsourcing</a>
                        <a href="">Locação de Servidor</a></p>
                </div>
            </div>
           </div>
           <div id="web" class="fundo menu-aberto">
            <div class="container">
              <h3>Web e Design</h3>
                   <ul class="sub-divisao-menu">
                            <li><a href="#">E-Commerce</a></li>
                            <li><a href="#">Website</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Marketing Digital</a></li>
                            <li><a href="#">Redes Sociais</a></li>
                </ul>
                <ul class="sub-divisao-menu">
                            <li><a href="#">Hospedagem de sites</a></li>
                    </ul>
                <span id="divisor"></span>
                 <div class="termos">
                    <p>Buscar por termos:</p>
                    <p><a href="">Cloud</a>
                        <a href="">SLA</a>
                        <a href="">Storage</a>
                        <a href="">Service Desk</a>
                        <a href="">Hardware</a>
                        <a href="">Locação de Computadores</a>
                        <a href="">VPN</a>
                        <a href="">Software</a>
                        <a href="">Cabiamento Estruturado</a>
                        <a href="">CPD</a>
                        <a href="">Infraestrutura</a>
                        <a href="">Data Center</a>
                        <a href="">Backup de Dados</a>
                        <a href="">Outsourcing</a>
                        <a href="">Locação de Servidor</a></p>
                </div>
            </div>
        </div>