html - 如何制作纯 CSS bootstrap onclick 和 hover 下拉菜单？

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

诀窍在于复选框上的 :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) 一个菜单(包含任意数量的子项)。并且所有三个都必须是 sibling ，以便选中/取消选中复选框可以通过伪类选择器和 ~ 组合器切换其他两个元素的类。

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

因此，您需要做的就是将菜单设置为隐藏，并将 ~ 组合符后面的菜单设置为显示复选框是否被选中或悬停在上面:

    .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 中找到一个完美的副本可能是一件非常痛苦的事情，或者这可能很容易，我不确定。但你并不真的需要它。您可以只添加不可见的复选框、标签和带有切换选择器的菜单，然后使用 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>