Home/Explore/

Drawer

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
This pattern is also known as off-canvas.
<div style="
    /* Container takes full size */
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;

    z-index: 9999;
">
    <!-- Backdrop -->
    <div style="
        /* Take full size */
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;

        /* User still can see the content of main page */
        background-color: rgba(0, 0, 0, 0.5);

        z-index: -1;
    " />

    <!-- Sidebar -->
    <div style="
        /* Take full height */
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 200px;

        /* Background */
        background-color: #fff;
    ">
        ...
    </div>
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!