csslayout/contents/full-screen-menu.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Full screen menu	Create a full screen menu with CSS flexbox	css fixed, css flexbox, css menu

HTML

<div class="full-screen-menu">
    <!-- The navigation menu -->
    <ul>
        ...
    </ul>

    <!-- The close button -->
    <button type="button" class="full-screen-menu__close"></button>
</div>

CSS

.full-screen-menu {
    /* Full screen overlay */
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;

    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
}

.full-screen-menu__close {
    /* Shown at top left corner */
    left: 1rem;
    position: absolute;    
    top: 1rem;
}

You can use the close button to create a button for closing the menu.

{% demo %}{% include "covers/full-screen-menu.njk" %}{% enddemo %}