codefog/contao-mobile_menu

Prevent content scrolling when menu is active

stefanschleich opened this issue · 11 comments

stefanschleich commented

There should be a way to disable scrolling of the page content when the menu is active. You could toggle overflow: hidden; on <body> via inline-style or toggle a class like mobile_menu_active on <body> so we can control the behaviour in css.

Aybee commented

👍 for "mobile_menu_active" on BODY when menu is open.

Is there a method we can use like onMenuOpen, onMenuClose?

qzminski commented

Class added in 99ddd84 and callbacks in 586842c. Can you confirm before I close the ticket? 😉

  • 🎉1
Aybee commented

This is realy great, thank you. It works.

Is it also possible to get and set options from outside the template? And to get the onMenuShow and onMenuHide as events from outside?

Here is a little typo:
https://github.com/codefog/contao-mobile_menu/blob/develop/languages/de/tl_module.php#L37
Replace "daß" with "dass".

qzminski commented

@Aybee I have replaced the callbacks with events in 2d70ca3. Can you test if that works out for you better?

Aybee commented

Thank you very much, this is perfect again. As I need the active class on HTML instead of BODY I use it this way.

/** add the active class to HTML if mobile menu is open */
var html = $('html');

$('.mobile_menu').on('showMobileMenu hideMobileMenu', function() {
  html.toggleClass('mobile_menu_active');
});

I need the active class on HTML as my HTML is overflow-y:scroll so it's useless to set BODY to overflow:hidden when menu is open.

Now I use this CSS:

html {
  overflow-y: scroll;
}
html.mobile_menu_active {
  overflow: hidden;
}
qzminski commented

So, do you need any more adjustments on this or am I good to release the next stable version?

Aybee commented

What if you give the class mobile_menu_active direct to the HTML instead of BODY? There are many developers I know who uses overflow-y:scroll on HTML. Is there something to say against that? I would prefer this.

I'm planing another feature, where the fold/unfold action on the submenus should only fire by clicking on the arrow icon not the link text. My customer doubts if visitors be aware that they have to click a second time to get to the top level pages. But I'm working on this feature first to bring a good start for this feature. I think it's hard or impossible to set an event listener on a pseudo element. And I like it simple will say without extra HTML code.

I will open a feature request when I've done some studying.

  • 👍1
qzminski commented

The <html> sounds much more flexible indeed. Changed in 2150b0b.

Aybee commented

Thank you, very nice. I think you are good to release this version as stable.

qzminski commented

Great, 2.7.0 is out already 👍🏻

Aybee commented

Great. Thank you very much. 🍻