1

Estou desenvolvendo uma aplicação web e quando eu passo o mouse por cima do Entre/Cadastre-se aparece um sub-menu, mas o sub menu ao invés de sobrepor as imagens ele empurra para baixo as imagens. Gostaria de que quando os sub-menu aparecer ele sobrepor as imagens

$(document).ready(function() {
  $(".col-xs-3.col-md-3 .entre").on("mouseenter", function() {
    $(".conteudo_dropdow").show();
  });

  $(".conteudo_dropdow").on("mouseout", function() {
    $(".conteudo_dropdow").hide();
  });



});
.conteudo_dropdow {
  display: none;
}

.conteudo_dropdow {
  margin-top: -12px;
  left: 15%;
  width: 75%;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col-xs-3 col-md-3">
  <h4 class="entre">Entre/Cadastre-se</h4>
</div>

<div class="conteudo_dropdow">

  <ul class="caixa">
    <div class="conteudo">
      <li><a href="#">Meus Pedidos</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Efetuar Login</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Alterar Dados</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Sair</a></li>
    </div>

  </ul>
  <h4 class="cadastrese">Não é Cadastrado? Cadastre-se</h4>
  <button type="button" class="cadastro">Cadastro</button>

</div>
<div id="hs_container" class="hs_container">
  <div class="hs_area hs_area1">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/3.jpg" alt="" />
  </div>
  <div class="hs_area hs_area2">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/3.jpg" alt="" />
  </div>
  <div class="hs_area hs_area3">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/3.jpg" alt="" />
  </div>
  <div class="hs_area hs_area4">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/3.jpg" alt="" />
  </div>
  <div class="hs_area hs_area5">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/3.jpg" alt="" />
  </div>
</div>

1 Resposta 1

0

Jovem basta colocar position:absolute no conteudo_dropdow e acertar as margins, veja no Snippet abaixo:

(Porém o problema mesmo é que o seu menu some quando vc tira o mouse de cima da "área ativa"!) Vc vai ter que ver como tratar isso...

$(document).ready(function() {
  $(".col-xs-3.col-md-3 .entre").on("mouseenter", function() {
    $(".conteudo_dropdow").show();
  });

  $(".conteudo_dropdow").on("mouseout", function() {
    $(".conteudo_dropdow").hide();
  });



});
.conteudo_dropdow {
  display: none;
}

.conteudo_dropdow {
  margin-top: 38px;
  left: 0;
  width: 75%;
  border: 1px solid black;
  position: absolute;
  background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col-xs-3 col-md-3">
  <h4 class="entre">Entre/Cadastre-se</h4>
</div>

<div class="conteudo_dropdow">

  <ul class="caixa">
    <div class="conteudo">
      <li><a href="#">Meus Pedidos</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Efetuar Login</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Alterar Dados</a></li>
    </div>
    <div class="conteudo">
      <li class="caixa_componentes"><a href="#">Sair</a></li>
    </div>

  </ul>
  <h4 class="cadastrese">Não é Cadastrado? Cadastre-se</h4>
  <button type="button" class="cadastro">Cadastro</button>

</div>
<div id="hs_container" class="hs_container">
  <div class="hs_area hs_area1">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/3.jpg" alt="" />
  </div>
  <div class="hs_area hs_area2">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/3.jpg" alt="" />
  </div>
  <div class="hs_area hs_area3">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/3.jpg" alt="" />
  </div>
  <div class="hs_area hs_area4">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/3.jpg" alt="" />
  </div>
  <div class="hs_area hs_area5">
    <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/1.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/2.jpg" alt="" />
    <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/3.jpg" alt="" />
  </div>
</div>

7
  • obrigado por responder @huhocsl, mas como posso fazer para que o submenu não suma quando eu tiro o mouse da área ativa ?
    – User1999
    2/02/2018 às 17:55
  • Cara do jeito que vc construiu a ação para aparecer esse menu com JavaScript eu não vou saber te responder. Até pq vc já postou a pergunta com o menu "buggado" rss eu só arrumei pra ele não empurrar as imagens :)
    – hugocsl
    2/02/2018 às 17:57
  • Eu usaria outras tecnicas para fazer esse efeito do Menu pq não entendo muito de JS. Mas te aconselho a criar uma "Nova Pergunta" com essa dúvida. Com certeza alguem vai te ajudar !
    – hugocsl
    2/02/2018 às 17:58
  • adicionei o codigo que vocÊ me recomendou mas ao aplica o position:absolute,o sub-menu quando aparece ele ficou embaixo das imagens
    – User1999
    2/02/2018 às 18:06
  • Na classe .conteudo_dropdow coloque z-index: 99999; que deve resolver. Mas aqui no meu pc e no Snippet acima está funcionando normal...
    – hugocsl
    2/02/2018 às 18:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .