mburger CSS

In this tutorial, we'll create an animated hamburger icon using the mburger CSS. Just follow the tutorial step by step and you'll have it up and running in no time.

This tutorial assumes you have some basic knowledge of the mmenu.js plugin. If you need more information about the mmenu.js plugin, have a look at the off-canvas tutorial first.

Lets start with creating a .html file and add some basic markup for a header and the content. For this tutorial we'll assume you already have a stylesheet (called my-styles.css) for styling this markup. We'll also add markup for a menu and use the mmenu.js plugin to make it an off-canvas menu. Most commonly, you'd write the JavaScript in a separate .js file, but for this tutorial we'll write it in an inline <script />.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />
    </head>
    <body>
        <div id="my-page">
            <div id="my-header">
                <nav id="my-menu">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><span>About us</span>
                            <ul>
                                <li><a href="/about/history/">History</a></li>
                                <li"><a href="/about/team/">The team</a></li>
                                <li><a href="/about/address/">Our address</a></li>
                            </ul>
                        </li>
                        <li><a href="/contact/">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div id="my-content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
        <script src="path/to/mmenu.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#my-menu" );
                }
            );
        </script>
    </body>
</html>

Note the ID "my-menu" on the <nav />, we'll be using it later on to target the menu for the hamburger icon.

Next, include the mburger .css file. Most commonly, .css files are located in the <head />.

<!DOCTYPE html>
<html>
    <head>
        ...
        <link href="path/to/mburger.css" rel="stylesheet" />
    </head>
    ...
</html>

The hamburger icon

Now that we've set up our .html file and added the markup for a header and the content, lets add the hamburger icon. For this tutorial, we'll add it in the header.

<div id="my-header">
    <a class="mburger">
        <b></b>
        <b></b>
        <b></b>
    </a>
    ...
</div>

If the href attribute on the <a /> targets a menu created with the mmenu.js plugin, the menu will automatically open when the hamburger icon is clicked. Remember the ID "my-menu" on the <nav />? We're now using it to target the menu.

<a class="mburger" href="#my-menu">
    <b></b>
    <b></b>
    <b></b>
</a>

The default animation is pretty basic. For a more enjoyable animation, we can add the preferred animation name to the class attribute. The available animations: collapse, spin, squeeze and tornado.

<a class="mburger mburger--collapse" href="#my-menu">
    <b></b>
    <b></b>
    <b></b>
</a>

If you want to add text to the hamburger icon, add it in a <span />.

<a class="mburger mburger--collapse" href="#my-menu">
    <b></b>
    <b></b>
    <b></b>
    <span>Menu</span>
</a>

Customize the icon

By default, the hamburger icon adopts to its environment pretty good, the bars scale to fit and inherit their color for the parent element. The hamburger icon is pretty easy to customize too, just override some of the CSS values and variables. Most commonly, you'd write these styles in a separate .css file, but for this tutorial we'll write them in an inline <style />.

<style>
    .mburger {
        width: 80px;
        height: 80px;
        --mb-bar-height: 2px;
    }
</style>

For a complete overview of all CSS values and variables, check out the the documentation.

Recap

You now have a .html file which looks something like this.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />
        <link href="path/to/mburger.css" rel="stylesheet" />
        <style>
            .mburger {
                width: 80px;
                height: 80px;
                --mb-bar-height: 2px;
            }
        </style>
    </head>
    <body>
        <div id="my-page">
            <div id="my-header">
                <a class="mburger mburger--collapse" href="#my-menu">
                    <b></b>
                    <b></b>
                    <b></b>
                    <span>Menu</span>
                </a>
                <nav id="my-menu">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><span>About us</span>
                            <ul>
                                <li><a href="/about/history/">History</a></li>
                                <li"><a href="/about/team/">The team</a></li>
                                <li><a href="/about/address/">Our address</a></li>
                            </ul>
                        </li>
                        <li><a href="/contact/">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div id="my-content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
        <script src="path/to/mmenu.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#my-menu" );
                }
            );
        </script>
    </body>
</html>

Learn more

If you'd like to learn more about customizing your hamburger icon, have a look at the documentation.
Documentation