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 ?
18 Sep 2020 at 03:50 PM
0pnshow more
StorStor
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>

20 Sep 2020 at 01:40 PM
0pnshow more
TimTim
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 ?
22 Nov 2020 at 01:19 PM
0pnshow more
StorStor
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();
}
});

22 Nov 2020 at 04:12 PM
0pnshow more
TimTim
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook & Twitter
2022 AnswerTabsTermsContact us