$0.07

Making a Slide-Out Menu with CSS

Ask a question+
0

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.

Batman 310
add comment

0 Answer

Your Answer