For it to be hidden when selecting any side of the page, it would be necessary to use the onblursince it would detect the loss of the "focus" of the element.
In this case I would create another function for onblurwhich it would make the menu hide with slideUpthe JQuery.
function showMenu(e){
e.preventDefault();
$("#menu").slideToggle();
}
function hideMenu(){
$("#menu").slideUp();
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* Dropdown Button */
.dropbtn {
background-color: #34495e;
color: white;
padding: 6px;
font-size: 16px;
border: none;
cursor: pointer;
height:40px;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fdfdff;
min-width: 180px;
box-shadow: 0px 1px 6px 0px #6a6e6f;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #008c69}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
This can be a simple menu with
JQuery
a as you request:Edition
For it to be hidden when selecting any side of the page, it would be necessary to use the
onblur
since it would detect the loss of the "focus" of the element.In this case I would create another function for
onblur
which it would make the menu hide withslideUp
theJQuery
.References of the
slides
slideToggle
,slideUp
andslideDown
Check bootstrap, to start a drowdown only one line of jquery is needed.
SOLUTION