Open the menu Skip to main content

Examples

Examples

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

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

Open in a new window
Open in a new window
Open in a new window
Open in a new window

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, add-ons and API pages.

    Options
    Position
    Theme
    Add-ons

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/mmenu.css" rel="stylesheet" />
        <script src="path/to/mmenu.js"></script>

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

                }
            );
        </script>

    </head>
    <body>

        <!-- The page -->
        <div class="page">
            <div id="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>