Playing about with a jQuery/CSS responsive menu just for practice and I've run into an issue which I simply have no idea how to resolve without fundamentally changing the way the menu works.
Basically, if you look at http://www.fraserboag.com/test/refined.html you'll see how it works. If you narrow your browser window below 800px, it breaks into a slide-out menu. It's all fixed position so stays visible at the top of the page as you scroll down the content.
The problem I have is with small browser windows (such as on mobile). When you tap one of the main menu items (or mouseover on desktop) such as "Information", a lot of the submenu options are listed off the bottom of the screen and, when you scroll the page, the content behind the menu scrolls rather than the menu itself.
Obviously the solution to this is that the menu should get scrolling priority when it's toggled open, and the page content gets scrolling priority when the menu is closed, but I have absolutely no idea how I would go about that (or if it's even possible).
The fixed to top nature of this menu is important to me as I want to write this code and reuse it in future mobile projects. And I realise that on mobile browsers the submenu also overflows out of the right-hand side of the browser window, but I will fix that just by scaling down the text size.
All suggestions welcome - thanks a lot! Fraser
