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 ?

Report

18 Sep 2020 at 03:50 PM

Stor

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>

Report

20 Sep 2020 at 01:40 PM

Tim

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 ?

Report

22 Nov 2020 at 01:19 PM

Stor

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();
}
});

Report

22 Nov 2020 at 04:12 PM

Tim