html - 纯 CSS3 幻灯片菜单 - 内容跳转到幻灯片顶部

Question

我一直在研究纯 css 幻灯片菜单..

基本设置导航菜单position:fixed top:0 right:-200..使用单选按钮控制slide

<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="Out 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>

点击使用 translatex(-200px) 移动正文内容并引入菜单..

唯一的问题是内容，无论内容向下滚动页面多远，内容都会跳回到顶部..

最终我希望内容保持原样，以防用户取消菜单并继续阅读..

这是显示问题的笔..滚动主要内容然后打开菜单.. CodePen .. 它总是会重置内容并跳回顶部..

另一个问题，当菜单可见时，如果你在菜单部分滚动，它会滚动主要内容，而不是菜单..

Answer 1

解决了我自己的问题..

这是由于两个单选按钮的位置.. 添加可见性:隐藏；每个单选按钮都解决了问题..

    <input type="radio" id="nav-expand" name="nav" />
    <input type="radio" id="nav-collapse" name="nav" checked="checked" />

    #nav-expand,
    #nav-collapse {
        visibility: hidden;
    }

新Code Pen修改后的 CSS..

这还没有解决其他问题..当菜单可见时，如果您在菜单部分滚动，它将滚动主要内容，而不是菜单..