Full Menu in Jquery

Question

Full Menu in Jquery

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

So people, I need some 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 settings to make it round, and what I need is:

Make it impossible to display more than one of the divs at the same time time.
Make clicking on 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><divclass="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>

javascript jquery

asked by anonymous 08.02.2018 / 20:26

2 answers

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
    }
});

08.02.2018 / 20:42

Calculate difference between timestamp field with specific timestamp popover button bootstrap in jquery does not show content

score 0 · Accepted Answer

Use the toggle method to make your code more efficient and clean.

To close everything by clicking outside the menu, use the onclick event in document and put stopPropagation(); in the onclick of the menu window, to prevent the menu from closing when 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><divclass="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>