使用 CSS 制作滑出式菜单答案

【问题标题】：Making a Slide-Out Menu with CSS使用 CSS 制作滑出式菜单
【发布时间】：2020-06-04 03:00:15
【问题描述】：

我有一个菜单，当您单击按钮时会滑出，但是当您释放时，如果您不移动鼠标，它会滑回...下面是我正在使用的 HTML 和 CSS 代码.我知道如何使用 JavaScript 来实现，但我希望它只使用 HTML 和 CSS。

HTML：

<div class="menu">
    <div id="menu-click"> <!-- This is the button -->
        <div></div> <!-- These are for the bars -->
        <div></div>
        <div></div>
    </div>
    <nav class="box-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </nav>
</div>

CSS：

/* This is for  */
nav.box-menu {
    display: block;
    position: fixed;
    top: 0;
    left: calc(100%);
    min-width: 200px;
    width: 50%;
    height: 100%;
    transition: all 0.2s;
    background: var(--primary-color);
    z-index: 999;
}

/* This is for the button itself */
#menu-click {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    z-index: 998;
    transition: all 0.5s;
}

/* This is what I have for making the menu slide out and stay out (which isn't working very well) */
#menu-click:active + nav.box-menu, nav.box-menu:hover {
    left: calc(100% - 50%);
}

我之前可以正常工作，但我不确定它为什么停止工作，因为我没有更改任何内容...我只是重新加载了页面。

所以我需要的是 CSS 中的规则/声明，当您单击按钮时，菜单会滑出并保持在外面，而无需在单击后立即移动鼠标（这有时会导致您突出显示其中一个菜单中的东西）。如果没有办法，我就用 JavaScript。

【问题讨论】：

我不确定，但它似乎按照您描述的方式工作：jsbin.com/tajojeb/edit?html,css,output
@MoshFeu 谢谢，我不知道为什么它也不起作用......我仍然不确定它为什么停止工作......我在 Stack Overflow 上找到了其他可以帮助我的东西我需要的东西，只是以不同的方式......

标签： html css menu css-selectors

【解决方案1】：

所以，我在 Stack Overflow 上发现了另一个问题，它回答了我的问题。这与我想要的方式不同，但效果很好。这是帮助我的answer。

答案的要点是使用<input type="checkbox" id="toggle-1>，使用CSS 使复选框看不见position: absolute; top: -999px; left: -999px;。
然后在你需要的地方，<label for="toggle-1">。
你有你的菜单<div id="menu>...</div>，所以当你点击标签时使用这个 CSS 让它出来（选中复选框）toggle-1:checked ~ #menu {/* Display your menu */}

我学到了你不想做任何像position: absolute; top: 0; left: 300%;这样的事情的艰难方法，即使你有body { overflow: hidden scroll; }，当你点击标签时它会出于某种原因滚动到复选框，所以其他一切都是走了……所以不要那样做。

希望这对同样遇到此问题的人有所帮助！

【讨论】：