I have been experimenting with a CSS-only slide menu.
Essentially, I set the nav menu position to fixed with top: 0 and right:-200 using radio buttons for control.
<input type="radio" id="nav-expand" name="nav" />
<input type="radio" id="nav-collapse" name="nav" checked="checked" />
<header>
<div class="logo">
<h1>Header Text</h1>
</div>
<label for="nav-expand" class="btn-nav-expand">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</label>
<label for="nav-collapse" class="btn-nav-collapse">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</label>
<nav>
<ul>
<li><a data-title="Home">Home</a></li>
<li><a data-title="News">News</a></li>
<li><a data-title="Our People">Our People</a></li>
<li><a data-title="About Us">About Us</a></li>
<li><a data-title="Product and Services">Product and Services</a></li>
<li><a data-title="Case Studies">Case Studies</a></li>
<li><a data-title="Contact Us">Contact Us</a></li>
</ul>
</nav>
<label for="nav-collapse" class="overlay"></label>
</header>
When clicked, it uses translatex(-200px) to move the body content and reveal the menu.
The main issue is that when scrolled down, the content always jumps back to the top. My goal is for the content to remain in place so users can cancel the menu and continue reading without interruption.
You can see the problem demonstrated in this Pen - scroll the main content and then open the menu: CodePen. The content consistently resets to the top.
Another problem occurs when the menu is visible - if you scroll on the menu part, it scrolls the main content instead of the menu itself.