Este é meu primeiro post e tenho uma dúvida. Estou trabalhando num dropdown menu que atua baseado no clique do usuário. Dessa forma, ao clicar em um dos itens do menu, ele desce apresentando mais informações, e ao clicar novamente ele é fechado (os códigos estão no final do post).
1: O primeiro problema é que eu quero que o menu seja encerrado ao clicar em qualquer local da página, e não somente clicando novamente no botão do menu. Então queria alguma função que capturasse o clique do mouse na página. Não sei se essa é a melhor solução, caso não seja, me informem de que forma eu posso fazê-lo.
2: O outro problema seria o fato de que o dropdown menu que está inserido no primeiro item do menu e só funciona após o primeiro clique, ou seja, só os cliques subsequentes fazem com que ele feche e abra o menu corretamente. O que pensei foi que o JavaScript com a variável que captura as informações não está atualizando até o momento do primeiro clique, dessa forma ele só funciona a partir do segundo. Eu não sei se estou certo, procurei por uma forma de executar o código somente quando tudo estivesse carregado, cheguei até a função document.onload()
, mas para mim não funcionou a função. Não sei se cometi algum erro ou se não era essa a solução. Enfim, essas são minhas duas dúvidas. Agradecerei muito se alguém puder ajudar, vai engradecer muito meu aprendizado.
var elem = document.getElementsByClassName('sub-menu');
function fclick(){
if(elem[0].style.display == "none"){
elem[0].style.display = "block";
}else{
elem[0].style.display = "none";
}
}
*{color: #fff; margin: 0; padding: 0;}
body{background-color: #f5f5f5;}
a{text-decoration: none;}
li{list-style: none;}
#navbar{
background-color: #2C353B;
height: 3em;
}
.menu{
display: block;
}
.menu li{
float: left;
padding: 13px 10px;
}
.sub-menu{
position: absolute;
display: none;
top: 47px;
left: 0;
}
.sub-menu li{
float: none;
padding: 13px 10px;
background-color: #2C353B;
}
<!DOCTYPE html>
<html lang="pt-BR" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>clickable-menu</title>
</head>
<body>
<nav id="navbar">
<ul class="menu">
<li>
<a href="#" onclick="fclick()">Some-item</a>
<ul class="sub-menu">
<li><a href="#">Some-item</a></li>
<li><a href="#">Some-item</a></li>
<li><a href="#">Some-item</a></li>
</ul>
</li>
<li><a href="#">Some-item</a></li>
<li><a href="#">Some-item</a></li>
</ul>
</nav>
<script type="text/javascript" src="script.js"></script>
</body>
</html>