Fullscreen introduction

By default, the menu will fill up 80% of the available width (or height when opened from the top or bottom), with a min-width of 140px and a max-width of 440px (140px and 880px when opened from the top or bottom). If you want the menu to fill up 100%, add "fullscreen" to the extensions option.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                extensions: ["fullscreen"]
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • Open the menu in fullscreen mode.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

CSS variables for the "fullscreen" extension

The "fullscreen" extension has no CSS variables.

SCSS variables for the "fullscreen" extension

Variable Datatype Default value Description
Include CSS
$mm_include_fullscreen Boolean true Whether or not to include CSS for the fullscreen extension throughout the entire CSS framework.

Next extension:
Listview