Mobile Nav no JS

index.html

<div class="page">
    <div class="hamburger">
        <input type="checkbox" id="nav-toggle">
        <label for="nav-toggle"><span class="toggle-words">Menu</span></label>
        <div class="menu">
            <ul>
                <li><a href="#">Nav Item</a></li>
                <li><a href="#">Nav Item</a></li>
                <li><a href="#">Nav Item</a></li>
            </ul>
        </div>
    </div>
</div>

mobile-nav-no-js.markdown

Mobile Nav no JS

A Pen by Bryan Robinson on CodePen.

License.

style.scss

$flyout: 250px; // reusable width. In practice on mobile, I use VWs
body {
    background-color: lightblue;
}

#nav-toggle {
    // Hides the checkbox
    position: absolute;
    opacity: 0;
    display: none;

}
.menu {
    position: fixed;
    right: -100%;
    top: 0;

    height: 100%;
    width: $flyout;
}
#nav-toggle {
    ~ label {
        display: block;
        
        // Nice bouncy transition
        transition: .5s transform;
        transition-timing-function: cubic-bezier(.38,.52,.37,1.27);
        
        // Styling
        background-color: white;
        padding: 15px 0;
        border: 1px solid grey;
        border-radius: 3px;
        width: 100px;
        text-align: center;
        
    }
}
#nav-toggle:checked {
    ~ label {      
        // Active styles
        background-color: grey;
        color: white;
        transform: translateX(-$flyout);
        
         &::before {
             content: "Close"; // Changes word on toggle without markup change
         }
        .toggle-words {
            display: none; // Changes word on toggle without markup change
        }   
    }
    
    ~ .menu {
        // Slides the nav out
        transform: translateX(-100vw);
    }
}


.menu {
    
    cursor: pointer;
    background-color: #efefef;
    
    transition: .53s transform;
    transition-timing-function: cubic-bezier(.38,.52,.37,1);
    ul {
        padding: 0;
        margin: 0;
    }
    li {
        list-style: none;
        a {
            text-decoration: none;
            color: grey;
            padding: 20px;
            display: block;
            border-bottom: 1px solid #ccc;
        }
    }

}



.hamburger {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-block;
}