Então pessoas, preciso de uma ajuda com Jquery pra fazer esse menu.
Tenho uma div que é ativada quando o item do menu é clicado, mas preciso ainda de alguns ajustes para deixar redondo, e o que eu preciso é:
- Fazer com que não seja possível exibir mais de uma das divs ao mesmo tempo.
- Fazer com que ao clicar fora da div feche o menu.
Tenho o seguinte código :
$(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>
.on('mouseleave', function(){})
$('.fundo').css('display', 'none');
Só uma observação: você pode fazer isso tudo usando apenas CSS.