Examples introduction

Here are some of the more extensive examples, all build with default options, extensions and add-ons. If you're looking for more basic examples, check out the options, extensions and add-ons.

Menu examples

Check out what you can do with some small JavaScript, CSS and a little bit of creativity.

App examples

With the offCanvas option set to false, you can easily create web applications that look and feel like native apps.

Playground

Here's a quick demo of how easy it is to create a cool and unique menu. If you'd like to learn more about customizing your menu, check out the options, extensions, add-ons and API pages.

Please note that not all options play well together, for example: You cant have the "panels zoom" effect without having "sliding submenus".

  • Options
  • Use sliding submenus.
  • Extensions
  • Dim out the page to black.
  • Open the menu from the right.
  • Apply the "dark" theme to the menu.
  • Add-ons
  • Prepend a fixed iconbar to the menu.
  • Show a small part of the parent panel.
  • Append a counter to the listitems.
  • Prepend a fixed header to the menu.
  • Prepend a fixed searchfield to the menu.
  • Append a fixed footer to the menu.
Congratulations, you're done!

Here's your HTML and JavaScript, the unimportant parts have been faded out:

<!DOCTYPE html>
<html>
    <head>

        <title>mmenu.js playground</title>
        <meta charset="utf-8" />
        <link href="layout.css" rel="stylesheet" />

        <!-- Include mmenu files -->
        <link href="path/to/css/mmenu.css" rel="stylesheet" />
        <script src="path/to/js/mmenu.js"></script>

        <!-- Fire the plugin -->
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {

                }
            );
        </script>

    </head>
    <body>

        <!-- The page -->
        <div class="page">
            <div class="header">
                <a href="#menu"></a>
                Demo
            </div>
            <div class="content">
                <p><strong>This is a demo.</strong><br />
                    Click the menu icon to open the menu.</p>
            </div>
        </div>

        <!-- The menu -->
        <nav id="menu">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/work">Our work</a></li>
                <li><span>About us</span>
                    <ul>
                        <li><a href="/about/history">History</a></li>
                        <li><span>The team</span>
                            <ul>
                                <li><a href="/about/team/management">Management</a></li>
                                <li><a href="/about/team/sales">Sales</a></li>
                                <li><a href="/about/team/development">Development</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><span>Services</span>
                    <ul>
                        <li><a href="/services/design">Design</a></li>
                        <li><a href="/services/development">Development</a></li>
                        <li><a href="/services/marketing">Marketing</a></li>
                    </ul>
                </li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>

    </body>
</html>