Not 100% sure you mean “locking”. If you mean clicking outside the menu either doesn’t work and/or closes it, you can position:fixed generated content from the source label over the whole screen, the position the popup menu over it.

To that end I’ve actually switched to treating mobile menus like they were modal dialogs. Gives more options for animating them into the screen, works better with scrolling when too big for the screen, and makes it more apparent what’s going on there.

See this article of mine:
https://levelup.gitconnected.com/modal-dialog-driven-websites-without-javascript-16e858615780

and its demo:
https://cutcodedown.com/for_others/medium_articles/modalSite/

Where it has both modal dialogs for login/search/submenu, and the mobile menu when the screen is too small. WITHOUT resorting to a line of JS though some JS enhancement could be used to clean up what it does to history if you don’t like how “back” takes you through the modals as if they were real subpages. Personally, I like that it takes you back to them, but I know that doesn’t float everyone’s boat.

Normally I wouldn’t deploy multiple stylesheets that way (wasted handshakes), but for demo sake I did that for clarity.