Page 1 of 11
Forum moderator: bigblog 
uCoz Community » For Webmasters » Custom Solutions » Close menu by clicking outside of the DIV
Close menu by clicking outside of the DIV
jackass
Posts: 278
Reputation: 10

Message # 1 | 8:54 PM
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!

Support forum
Mar1aN
Posts: 186
Reputation: 3

Message # 2 | 10:22 PM
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/

jackass
Posts: 278
Reputation: 10

Message # 3 | 11:30 AM
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!

Support forum
uCoz Community » For Webmasters » Custom Solutions » Close menu by clicking outside of the DIV
Page 1 of 11
Search: