Menu icon Foundation
make overlay menu close on body click

hi,

i am using this overlay imenu : http://zurb.com/building-blocks/overlay-navigation-menu

it looks great on small resolutions but when i go to an iMac with very high resolution the menu does not cover the whole height of the screen. It leaves the rest ofthe screen uncovered. This makes the user want to close the menu by clicking somewhere else in the screen.

 

This is the JS function that opens the menu

 

$(document).foundation();

$(".toggle-menu").on("click", function(){
  $("#menu").toggleClass("is-open");
});

i want to click outside the menu and it closes.

i have tried

$(document).foundation();

$(".toggle-menu").on("click", function(){
  $("#menu").toggleClass("is-open");
  $("body").toggleClass("is-open");
});

Instead of closing back it just stops working.

I know my JS is not great ...any help welcome

thanks

 

overlay menujavascript

hi,

i am using this overlay imenu : http://zurb.com/building-blocks/overlay-navigation-menu

it looks great on small resolutions but when i go to an iMac with very high resolution the menu does not cover the whole height of the screen. It leaves the rest ofthe screen uncovered. This makes the user want to close the menu by clicking somewhere else in the screen.

 

This is the JS function that opens the menu

 

$(document).foundation();

$(".toggle-menu").on("click", function(){
  $("#menu").toggleClass("is-open");
});

i want to click outside the menu and it closes.

i have tried

$(document).foundation();

$(".toggle-menu").on("click", function(){
  $("#menu").toggleClass("is-open");
  $("body").toggleClass("is-open");
});

Instead of closing back it just stops working.

I know my JS is not great ...any help welcome

thanks