Slideout menu: touch enabled only on close

Question

I'm building a mobile first webapp. I want to add a slideout menu for the main navigation.

The main page of the app is an interactive map, as the user will be moving around on the map a lot, I must deactivate touch for opening the slideout menu, otherwise the user will be opening it by mistake quite often.

Using touch to slide out the menu is a nice feature for mobile users. So, I was considering enabling touch for the rest of the site, and enabling it only for closing it on the map page. Would this seem confusing for the user ? Should I just stick to a button for toggling the slide out menu ?

Edit

I realized that my question is directly related to the library I'm using, as they don't all work the same.

I'm using slideout.js

It seems the author has adressed the issue by allowing a grabWidth so the menu slides out only if swiping from screen edges. Haven't gotten it to work yet though.

Answer 1

Go with a button that (when pushed) reveals the side menu, or a pull-tab for the user to that's independent of the map scrolling. Conflicting UI mechanisms should be avoided.

Example

Replace "Pull Tab" with a more discreet UI object, such as a transparent hamburger menu, or static menu header.

^{download bmml source – Wireframes created with Balsamiq Mockups}