如何制作纯 CSS 引导 onclick 和悬停下拉菜单？

Question

悬停时会激活一个纯 CSS（无 JavaScript）下拉菜单，如果您单击它，该菜单将保持打开状态。

在这里：Making Animated Dropdown Menu by Using Pure CSS Like Bootstrap does

代码如下：

html, body {
    margin:0;
}
.acn-menu {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    min-height: 74px;
    width: 100%;
}
.label_openclose {
    display: none;
}
.menu-tabs {
    height: 100%;
}
.menu-tabs .elem {
    box-sizing: border-box;
    padding: 0 20px;
    float: left;
    height: 100%;
    line-height: 70px;
    background-color: rgb(30, 30, 30);
    color: white;
}
@-webkit-keyframes spin {
    0% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(-180deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(-180deg);
    }
}
.menu-check:checked ~ .label_openclose {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.menu-check {
    display: none;
}
.menu-tabs .elem:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
/*@media screen and (max-width:55%)*/
 @media screen and (max-width:768px) {
    .label_openclose {
        -webkit-animation: spin 2s;
        animation: spin 2s;
        display: inline-block;
        transform: rotate(-180deg);
        transition-duration: 1s;
        margin: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border-top: 10px solid rgb(50, 50, 50);
        border-right: 10px solid rgb(100, 100, 100);
        border-bottom: 10px solid rgb(150, 150, 150);
        border-left: 10px solid rgb(200, 200, 200);
        background-color: transparent;
        cursor: pointer;
    }
    .label_openclose:hover {
        transform: rotate(180deg);
    }
    .menu-tabs .elem {
        transition: border 1s linear, height 1s;
        line-height: initial;
        float: initial;
        height: 0px;
        cursor: pointer;
        border-top: 0px solid #000;
        overflow: hidden;
    }
    .menu-tabs:hover .elem {
        height: 25px;
    }
    .menu-check:checked ~ .menu-tabs .elem {
        height: 25px;
        color: white;
        border-top: 2px solid rgba(255, 255, 255, 0.2);
    }
    .label_openclose:hover ~ .menu-tabs .elem {
        border-top: 2px solid rgba(255, 255, 255, 0.2);
        height: 25px;
    }
}

<div class="acn-menu">
    <input type="checkbox" id="openclose" class="menu-check" />
    <label class="label_openclose" for="openclose"></label>
    <div class="menu-tabs">
        <div class="elem">test</div>
        <div class="elem">nav</div>
        <div class="elem">bar</div>
        <div class="elem">with</div>
        <div class="elem">transitions</div>
    </div>
</div>
<main>
    test content of main page</br>The navbar menu stays open when you click on the circle</br>and it even opens on hover, not just on click.
</main>

我会将下拉菜单放在导航栏中显示“解决方案”的位置：

如何使用默认的 bootstrap 3 导航栏菜单进行这项工作？

Answer 1

您可以为此使用:focus。查看example code。

缺点：您无法切换下拉菜单（可以打开但无法关闭）。

Answer 2

诀窍在于复选框上的:checked 和:hover CSS 伪类选择器与~（通用同级组合器）结合使用。组合符 (~) 听起来很复杂，但它基本上只是意味着选择 ~ 之后的任何同级，如果它存在于 html 中的 ~ 之前的选择器之后。例如：

    .before ~ .after {
       background-color: orange;
    }

...

    <div>
      <p class = "before">Before</p>
      <p class = "after">After</p> <!-- I'll be orange -->
      <p class = "after">After</p> <!-- Me too! -->
      <p class = "after">After</p> <!-- You get the point -->
    </div>

所以基本上你所需要的只是 (1) 一个复选框元素 (2) 所述复选框的标签，以及 (3) 一个菜单（包含任意数量的子项）。并且所有三个都必须是兄弟姐妹，以便选中/取消选中复选框可以通过伪类选择器和 ~ 组合器切换其他两个元素的类。

在您展示的示例中，复选框显示设置为无，但这只是因为它很难看。它很容易仍然存在，并且菜单切换功能相同。您可以单独使用标签切换检查，所以这并不重要。但是看不见的复选框是使一切发生的原因。如果您愿意，您可以直接设置样式并忘记标签。

所以您需要做的就是将菜单设置为隐藏，并在 ~ 组合符之后的菜单显示复选框是否被选中或悬停：

    .menu {
      display: none;
    }
    .check-toggle:checked ~ .menu, .check-toggle:hover ~ .menu {
      display: block;
    }

...

    <input id="checkBox" class="check-toggle" type="checkbox"/>
    <label for="checkBox">MENU</label>
    <div class="menu">
      <div>Menu Items</div>
      <div>Menu Items</div>
      <div>Menu Items</div>
      <div>Menu Items</div>
    </div>

在 bootstrap 中找到一个完美的副本可能会很痛苦，或者可能很容易，我不确定。但你真的不需要它。您可以使用切换选择器添加不可见的复选框、标签和菜单，然后使用引导程序设置其他所有内容。您可能需要过度供电级联，但最坏的情况是您可以使用一个特殊的切换选择器id 而不是类。

这是一个极简主义的工作示例：

    <style>
      .check-toggle {
        /*display: none;*/
      }
      .menu {
        display: none;
        position: absolute;
        background-color: white;
        border: 2px solid black;
        margin-top: -2px;
      }
      .menu:hover {
        display: block;
      }
      .check-toggle:checked ~ label, .check-toggle:hover ~ label {
        color: orange;
      }
      .check-toggle:checked ~ .menu, .check-toggle:hover ~ .menu {
        display: block;
      }
    </style>
    <div>
      <input id="checkBox" class="check-toggle" type="checkbox"/>
      <label for="checkBox">MENU</label>
      <div class="menu">
        <div>Menu Items</div>
        <div>Menu Items</div>
        <div>Menu Items</div>
        <div>Menu Items</div>
      </div>
    </div>