Javascript / jQuery menu - show on click and hide on click outside

Question

Javascript / jQuery menu - show on click and hide on click outside

I need to create a dropdown menu that will show on click and will hide on click outside. How can do it by using Javascript ?

0

Report

18 Sep 2020 at 03:50 PM

Stor

javascript

3 answers

OK

Tim · Answer 1

Hi,

To show the menu and close it when user clicks outside, you can use the simple solution below. It is based on javascript function target.

<script type="text/javascript">

window.onclick = function(event) {
if ( (!event.target.matches('.sub_menu')) && (!event.target.matches('.menu')) ) {
document.getElementById('sub').style.display='none';
}
}

</script>

<style>

.menu {
display: block;
text-decoration: none;
font-family: Arial;
color: #FFFFFF;
font-size: 12pt;
width: 150px;
background-color: #000080;
padding: 15px 0px 15px 0px;
width: 150px;
text-align: center;
}

.sub_menu {
display: none;
position: absolute;
}

.sub_menu_link {
display: block;
text-decoration: none;
font-family: Arial;
color: navy;
font-size: 12pt;
width: 150px;
background-color: #E6E6FF;
padding: 15px 0px 15px 15px;
}

a.sub_menu_link:hover {
display: block;
text-decoration: none;
font-family: Arial;
color: navy;
font-size: 12pt;
width: 150px;
background-color: #CCCCFF;
padding: 15px 0px 15px 15px;
}

</style>

<body>

<br />
<br />
<a href="javascript: void(0);" onClick="javascript: document.getElementById('sub').style.display='block';" class="menu" >Menu</a>
<div id="sub" class="sub_menu">
<a href="#1" class="sub_menu_link">Link 1</a>
<a href="#2" class="sub_menu_link">Link 2</a>
<a href="#3" class="sub_menu_link">Link 3</a>
</div>
<br />
<br />

</body>

Stor · Answer 2

This code works well on Windows and also Mac laptops, but it doesn't work on some Android mobile phones and iPhones. The menu appears on click, but it will not hide when I click outside. Have you got any idea why there is a problem with hiding of menu on some mobile web browsers ?

Tim · Answer 3

Instead of javascript solution, you can try jQuery to show the menu on click and hide it on click outside. The solution below should be supported in iPhones and also in more Android phone web browsers. It is checking the class name of element that was clicked.

$(document).click(function(t){
var clicked = t.target.className;
if( ( clicked != "menu" ) ) {
$(".sub_menu").slideUp('slow').hide();
}
});

Javascript / jQuery menu - show on click and hide on click outside

menu

javascript

How to add new line breaks in textarea using Javascript ?

Prevent typing whitespace / disable spacebar in input - Javascript

onSubmit return false not working - submit form by Javascript

Set cookies to expire in hours, minutes, seconds - Javascript

When Enter, Backspace, Spacebar keys are pressed - Javascript

Get cursor postion in characters in textarea - Javascript

Javascript alert popup with two buttons OK / Cancel or Yes / No

Javascript function in link href="" - prevent from redirecting

Keyup, Change, Blur - multiple jQuery events for same function

Events onKeyPress, onKeyUp, onKeyDown, onChange - difference