Making a Slide-Out Menu with CSS

Question

I have a menu that slides out when you are clicking on a button, but when you release, if you aren't moving the mouse, it will slide back... The following it the HTML and CSS code I am using. I know how to make it do it with JavaScript, but I want it to only use HTML and 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%);
}

I had it working fine before, but I'm not sure why it stopped working, since I didn't change anything... I just reloaded the page.

So what I need is the rules/declarations in CSS that will make it when you click the button the menu will slide out and stay out without having to move the mouse immediately after clicking (which sometimes causes you to highlight one of the things in the menu). If there isn't any way, I will just use JavaScript.

I'm not sure but seems like it's working in the way you described: https://jsbin.com/tajojeb/edit?html,css,output — Mosh Feu, Jun 04 '20 at 05:11
@MoshFeu Thanks, I wasn't sure why it wasn't working either... I still am not sure why it stopped working... I found something else on Stack Overflow that help me do what I needed, just in a different way... — Jacob Hornbeck, Jun 04 '20 at 16:50

score 0 · Accepted Answer · answered Jun 04 '20 at 16:48

So, I found another question on Stack Overflow that sort of answered my question. It wasn't the same way that I was wanting, but it worked out fine. This is the answer that helped me.

The gist of the answer was saying use <input type="checkbox" id="toggle-1>, use CSS to make the checkbox out of sight position: absolute; top: -999px; left: -999px;.
Then make where you need it, a <label for="toggle-1">.
You have your menu <div id="menu>...</div> and so use this CSS to make it come out when you click the label (which checks the checkbox) toggle-1:checked ~ #menu {/* Display your menu */}

I learned the hard way that you don't want to do any thing like position: absolute; top: 0; left: 300%; Even if you have body { overflow: hidden scroll; }, when you click the label it will scroll to the check box for some reason and so everything else is gone... so don't do that.

Hope this helps anyone who also had this problem/question!

Making a Slide-Out Menu with CSS

1 Answers1