使用 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 中的 rules/declarations，当您单击按钮时，菜单将滑出并留在外面，而无需在单击后立即移动鼠标（有时会使您突出显示菜单中的其中一项）。如果没有办法，我就用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; }，当你点击标签时它会滚动到一些复选框原因，所以其他一切都消失了......所以不要那样做。

希望这对同样有此问题的人有所帮助 problem/question！

使用 CSS 制作滑出式菜单

Making a Slide-Out Menu with CSS

html

css

menu

css-selectors