0
I’m deploying Javascript functionality to close a submenu. To close with ESC and clicking on the menu item that opened the submenu is working. What I’m not able to make work is the function that captures the click outside the open submenu and menu item areas, it seems that the function is not even being read. Follow code below for conference, criticism and suggestions. I’m a beginner and I’m not yet familiar with good programming practice, so feel free to criticize whatever is in disarray with good practice.
Details: the HTML and CSS part was copied from an example, what I did was rename some classes/Ids but the Javascript code was deployed by me. I had uploaded the code to Codepen, copied it and pasted it here, so it’s all one file. If you want to see it in Codepen, the link is this [Codepen link][1] (I don’t even know if I can post the link here, so if you’re breaking the rules, please excuse me). EDIT: As requested in the comments, I put the code in order. The part of Javascript that is giving problems is right at the end, where there is Alert("click off the menu").
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/estilos.css"/>
<script type="text/javascript" src="Java/script.js"></script>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li> <!-- <li><a class="active" href="#home">Home</a></li> -->
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" id="Menu_Principal_ITENS" onclick="SubMenu_EXIBE_OCULTA('SubMenus_MONTAGEM')">Clique-me</a>
<div id="SubMenus_MONTAGEM">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</body>
</html>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, #Menu_Principal_ITENS {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover #Menu_Principal_ITENS {
background-color: red;
}
li.dropdown {
display: inline-block;
}
#SubMenus_MONTAGEM {
display: none;
}
#SubMenus_MONTAGEM {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#SubMenus_MONTAGEM a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
/* text-align: center; */
text-align: left;
}
#SubMenus_MONTAGEM a:hover {background-color: #f1f1f1}
.CSS_Exibe_Oculta {
display:block;
}
JAVASCRIPT
function SubMenu_EXIBE_OCULTA(menu){
var obj=document.getElementById(menu);
if(obj.style.display == 'block'){
obj.style.display = 'none';
}
else
{obj.style.display = 'block';
}
document.querySelector('body').addEventListener('keydown', function(event) {
var tecla = event.keyCode;
if (tecla == 27){
obj.style.display = 'none';
}
});
}
var modal = document.getElementById('menu');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
alert("cliquei fora do menu");
}
}
Take a look at the code you posted in the question. It’s all disorganized. Please edit the question with the well-organized code so it can be analyzed better.
– Sam
You’re right, Sam, it got really messy, it’s just that I copied it from Codepen and I kind of glued it in a hurry, and now it’s all separated. The part of the code that is not running is at the very end, where there is Alert, which I put to see that this part of the code is not running.
– Clovis Alberto Block