时间戳

首页 > 解决方案 > 使用 CSS 制作滑出式菜单

html - 使用 CSS 制作滑出式菜单

问题描述

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

标签： htmlcssmenucss-selectors

解决方案

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

答案的要点是使用<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; }，当你点击标签时，它会出于某种原因滚动到复选框，所以其他一切都消失了......所以不要这样做那。

希望这可以帮助任何也有这个问题/疑问的人！

推荐阅读