Criei um menu dropdown
responsivo, porém, não está funcionando corretamente.
Na tela mobile, ao clicar no ícone do menu ele é aberto e ao clicar num link do menu ou fora do menu ele fecha.
Porém, fica uma barra aparecendo que só desaparece depois de se clicar no menu novamente.
Segue o código:
$(document).ready(function() {
//Cache dos elementos em variáveis
var botao = $('.bt_menu');
var dropDown = $('.dropDown');
var menu = $('.menu');
botao.on('click', function(event){
dropDown.stop(true,true).slideToggle();
event.stopPropagation();
});
//Clicando no html vai fechar o dorpDown
$('html').on('click', function(){
dropDown.slideUp();
});
});
/*Resetando os valores de espaçamento */
* {
margin: 0;
padding: 0;
}
/*Estilizando a nav da classe menu */
.menu {
width: 100%;
height: 50px;
background-color: #222;
font-family: Arial;
}
/*Estilizando as listas */
.menu ul {
list-style: none;
position: relative;
}
.menu ul li {
width: 150px;
float: left;
}
.menu a {
padding: 15px;
display: block;
text-decoration: none;
text-align: center;
background-color: #222;
color: #fff;
}
.menu ul ul {
position: absolute;
visibility: hidden;
}
.menu ul li:hover ul {
visibility: visible;
}
.menu a:hover {
background-color: #f4f4f4;
color: #555;
}
.menu ul ul li {
float: none;
border-bottom: solid 1px #ccc;
}
.menu ul ul li a {
background-color: #069;
}
/*Criando o label */
label[for="bt_menu"]{
padding: 5px;
background-color: #222;
color: #fff;
font-family: Arial;
text-align: center;
font-size: 30px;
cursor: pointer;
height: 50px;
}
#bt_menu {
display: none;
}
label[for="bt_menu"]{
display: none;
}
/*Deixando o Menu Responsivo */
@media(max-width: 800px) {
label[for="bt_menu"] {
display: block;
}
#bt_menu:checked ~ .menu{
margin-left: 0;
}
.menu{
margin-top: 5px;
margin-left: -100%;
transition: all .4s;
}
.menu ul li {
width: 100%;
float: none;
}
.menu ul ul {
position: static;
overflow: hidden;
max-height: 0;
transition: all 4s;
}
.menu ul li:hover ul {
height: auto;
max-height: 200px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pt" ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parsoni</title>
</head>
<body>
<input type="checkbox" id="bt_menu" class="bt_menu"/>
<label for="bt_menu">☰</label>
<nav class="menu">
<ul id="menu-navegacao" class="dropDown">
<li><a href="#">Serviços</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Logout</a></li>
</ul>
</nav>
</body>
</html>
display: none
. Mas sem o HTML fica impossível fazer qualquer análise precisa.