How to make a pure CSS bootstrap onclick and hover dropdown menu?

Question

There is a pure CSS (no JavaScript) dropdown menu activated on hover, and the menu stays open if you click it.

It's here: Making Animated Dropdown Menu by Using Pure CSS Like Bootstrap does

Here's the code:

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>

I would put the drop down where it says "Solutions" in the navbar:

How could I make this work with the default bootstrap 3 navbar menu?

I think this can't be done with the default Bootstrap menu markup. The animation can be done using CSS/LESS/SASS on the top of the Bootstrap original CSS without altering the markup. To have anything stay open after a click, you need to involve some markup tricks in addition to CSS. Like a checkbox in combination with the CSS selector `input[type=checkbox]:checked ~ .my-popup` or using `tabindex="0"` on an HTML element which let it can have a focus (use the selector `.my-popup:target` in this case). — feeela, Nov 01 '17 at 23:12
I may perhaps have to copy the code from the snippet above, and then see what happens and manually theme the circle drop-down to work more simply, as well as stay put to the right and not the center. — oatmealNUGGY, Nov 01 '17 at 23:27

WebDeg Brian · Answer 1 · 2018-11-02T10:59:31.263

1

You can use :focus for this. Check out the example code.

Drawback: You cannot toggle the dropdown (You can open it but cannot close it).

edited Nov 02 '18 at 10:59

answered Nov 01 '17 at 23:28

WebDeg Brian

802
1
7
21

score 1 · Accepted Answer · answered Nov 02 '17 at 02:26

The trick is in the :checked and :hover CSS psuedo-class selectors on a checkbox in combination with ~ (the general sibling combinator). The combinator (~) sounds complicated, but it basically just means select any sibling after the ~ if it is present in html after the selector before the ~. For example:

    .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>

So basically all you need is (1) a checkbox element (2) a label for said checkbox, and (3) a menu (with as many children as you want). And all three have to be siblings so that checking / unchecking the checkbox can toggle the classes of the other two elements via the psuedo-class selectors and the ~ combinator.

In the example you showed, the checkbox display is set to none, but that's just because its ugly. It could easily still be there and the menu toggle would function the same. You can toggle the check with the label alone, so it's doesn't really matter. But the invisible checkbox is what makes everything happen. You could style it directly and forget the label if you wanted to.

So all you need to do is set the menu to hidden, and the menu after the ~ combinator to show if the checkbox is either checked or hovered over:

    .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>

It might be an absolute pain to find a perfect replica of this in bootstrap, or it might be easy, I'm not sure. But you don't really need it. You can just add the invisible checkbox, the label, and the menu with the toggling selectors, and then style everything else with bootstrap.You might need to over-power the cascade, but worst comes to worst you can make special toggling selectors with an id instead of a class.

Here is a minimalist working example:

    <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>

How to make a pure CSS bootstrap onclick and hover dropdown menu?

2 Answers2