使用CSS制作滑出菜单

Question

我有一个菜单，当您单击按钮时，该菜单会滑出，但是释放时，如果您不移动鼠标，它将向后滑动...。下面是我正在使用的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。

Answer 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; }，当您单击标签时，由于某种原因，它也会滚动到复选框，因此其他所有内容都消失了...所以不要那样做。

希望这对也有此问题/疑问的人有所帮助！