Close menu by clicking outside of the DIV - uCoz Community

Page 1 of 1 1
Forum moderator: bigblog

Close menu by clicking outside of the DIV

Close menu by clicking outside of the DIV

Posts: 294

Reputation: 10

Message # 1 | 8:54 PM 2015-06-09

Hello!

I have a responsive design in my site and I made a mobile menu for small screen devices!
I have one problem, I can only close expanded menu by clicking on the menu again! What I want is to be able to close menu by clicking anywhere on my site outside of the DIV containing menu itself!

Here is the code

Code

<input class="mobile_menu_button" type="button" value="Menu" onclick="Show_Div(Div_1)" />
<div id="Div_1">
MENU CONTENT HERE
</div>

So I believe this is very simple, but I just don't know what to search for in google!

My site: http://egu.lv/

If you make your browser really small you will see mobile menu appearing next to the search on top right corner!

Endijs!

Mar1aN

Posts: 192

Reputation: 3

Message # 2 | 10:22 PM 2015-06-09

Hi

I had the same "problem".
This jQuery code might help you http://stackoverflow.com/questio....tionals .

If you don't understand jQuery, here are some free(and very good) tutorials:
http://www.codecademy.com/en/tracks/jquery
http://www.w3schools.com/jquery/

Poze haioase
Learn to code
Manage tasks and notes

Posts: 294

Reputation: 10

Message # 3 | 11:30 AM 2015-06-10

Mar1aN, thanks for answer, but it's not working all the way!
Now I have this code

Code

<script type="text/javascript">
  function Show_Div(Div_id) {
  if (false == $(Div_id).is(':visible')) {
  $(Div_id).slideDown(250);
  }
  else {
  $(Div_id).slideUp(250);
  }
  }

$('body').click(function(e) {
if ($('#Div_1').is(':visible')) {
$('#Div_1').hide();
e.stopPropagation();
}
});
  </script>

<input class="mobile_menu_button" id="mobile_menu_button" type="button" value="Izvēlne" onclick="Show_Div(Div_1)" />
<div id="Div_1">
MENU
</div>

But now I need to double click to open menu!
Any help?

Added (2015-06-10, 11:30 AM)
---------------------------------------------
Now it works! smile

Code

<script type="text/javascript">

  function Show_Div(Div_id) {
  if (false == $(Div_id).is(':visible')) {
  $(Div_id).slideDown(250);
  }
  else {
  $(Div_id).slideUp(250);
  }
  }

$('body').click(function(e) {
if ($('#Div_1').is(':visible')) {
$('body').click(function () {
$('#Div_1').hide();
e.stopPropagation();
});
} else {
$('#mobile_menu_button').click(function (e) {
$('#Div_1').show();
e.stopPropagation();
});
}
});
  </script>

only don't know how to apply same animation to body click!

Close menu by clicking outside of the DIV

Page 1 of 1
1