Menu

Javascript

SnMenu({
    menuId: 'TopMenuDemo',
    toggleButtonID: 'TopMenuDemo-toggle',
    toggleClass: 'TopMenuDemo-is-show',
    contextId: 'TopMenuDemo-context',
    menuCloseID: 'TopMenuDemo-wrapper',
});

SCSS

#TopMenuDemo-context {
    height: 400px;
    border: 1px solid var(--border-color);
}

.TopMenuDemo {
    a {
    padding: 0 12px;
    line-height: 2.25rem;
        &:hover {
            background: var(--hover-background);
            color: var(--color1-6);
        }
    }
}

.TopMenuDemo {
    @include to(l) {
        &-wrapper {
            background: rgba(black, 0.5);
            position: fixed;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            left: -100vw;
            top: 0;
        }
        width: 220px;
        background: var(--panel-background);
        height: 100vh;
    }
}

.TopMenuDemo-is-show {
    .TopMenuDemo-wrapper {
        left: 0;
    }
}

.TopMenuDemo {
    @include from(l) {
        li ul {
            min-width: 200px;
            border: 1px solid var(--border-color);
        }
    }
}

#TopMenuDemo-toggle {
    @include from(l) {
        display: none;
    }
}

HTML

<div id="TopMenuDemo-context">
    <div class="SnBtn" id="TopMenuDemo-toggle">=</div>
    <div class="TopMenuDemo-wrapper" id="TopMenuDemo-wrapper">
        <ul class="SnMenu TopMenuDemo" id="TopMenuDemo">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#" class="is-toggle">Menu 3<i class="icon-down toggle"></i></a>
                <ul>
                    <li><a href="#">SubMenu 1</a></li>
                    <li><a href="#">SubMenu 2</a></li>
                    <li><a href="#">SubMenu 3</a></li>
                    <li><a href="#" class="is-toggle">SubMenu 4<i class="icon-down toggle"></i></a>
                        <ul>
                            <li><a href="#">SubMenu 1</a></li>
                            <li><a href="#">SubMenu 2</a></li>
                            <li><a href="#">SubMenu 3</a></li>
                            <li><a href="#">SubMenu 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li> <a href="#" class="is-toggle">Menu 4<i class="icon-down toggle"></i></a>
                <ul>
                    <li><a href="#">SubMenu 1</a></li>
                    <li><a href="#" class="is-toggle">SubMenu 2<i class="icon-down toggle"></i></a>
                        <ul>
                            <li><a href="#">SubMenu 1</a></li>
                            <li><a href="#">SubMenu 2</a></li>
                            <li><a href="#">SubMenu 3</a></li>
                            <li><a href="#">SubMenu 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>