Having difficulties with a menu layout where the parent container spans across the entire site and a div contains the actual content. Everything looks fine on larger screens, but on mobile devices, it's challenging to display all the content.
I've set up a jsfiddle at http://jsfiddle.net/89xyzsfz/ to demonstrate the issue with a working example along with the necessary js and css. On mobile devices, only parts of the content are visible, and scrolling through them is not possible.
The code snippet below highlights the key components:
<div class="hiddenMenu jsMenu">
<div class="menuContainer jsMenuContainer">
<h3>Menu content</h3>
<ul>
<li><a href="#item1">Item1</a></li>
<li><a href="#item2">Item2</a></li>
<li><a href="#item3">Item3</a></li>
<li><a href="#item4">Item4</a></li>
<li><a href="#item5">Item5</a></li>
<li><a href="#item6">Item6</a></li>
<li><a href="#item7">Item7</a></li>
<li><a href="#item8">Item8</a></li>
<li><a href="#item9">Item9</a></li>
</ul>
</div>
<div class="menuBackground jsMenuBackground"></div>
</div>
hiddenMenuencompasses the entire menu. Initially, the menu is hidden and becomes visible upon clicking an element with the css class jsMenuButton.menuContainerhouses the scrollable content when parts are out of view on smaller devices.menuBackgroundis utilized for background design purposes when displaying the content, providing no other specific functionality.