Include plugin file into Your website.

<script type="text/javascript" src="materialmenu.jquery.js"></script>

Place belowed menu button in Your HTML. Click this button to open menu on mobile device.

<div class="material-menu-button">
    <span></span>
    <span></span>
    <span></span>
</div>

Create new or copy bolowed CSS, to style Your menu and menu-button.

/** On desktop, we do not need to show menu button */
.material-menu-button {
    display:none;
}

/** Menu in mobile-view */
@media only screen and (max-width: 767px) {
    /** Button styling */
    .material-menu-button {
        display:block;
        width:50px;
        height:45px;
        padding:10px 10px 0px 10px;
        background-color:#000;
    }
    .material-menu-button span {
        display:block;
        width:100%;
        height:5px;
        margin-bottom:4px;
        background-color:#fff;
    }

    .material-menu-wrapper {
        padding:20px;
    }
    .material-menu-view-mobile {
        background-color:#fff;
        -webkit-box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);
        box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);
    }

    /** Titlebar */
    .material-menu-titlebar {
        -webkit-box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);
        box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);
    }
}

Plugin must be called on UL element. It wraps UL into DIV with class .material-menu-wrapper. When is mobile view, plugin add to the NAV element ($(this).parent().parent()) class named .vertical for styling in vertical mode, but You can change what plugin does in mobile view, by providing Your own function for option onChangeMobile: function() {}.

$('.material-menu nav > ul').materialmenu();

---

Explanation

Belowed code:

<div class="material-menu">
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about.html">About us</a></li>
            <li><a href="/contact.html">Contact</a></li>
        </ul>
    </nav>
</div>

Will be converted into this:

<div class="material-menu">
    <nav>
        <div class="material-menu-wrapper material-menu-view-desktop" style="some:style;">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about.html">About us</a></li>
                <li><a href="/contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>

And in mobile view, will looks like this:

<div class="material-menu">
    <nav class="vertical">
        <div class="material-menu-wrapper material-menu-view-mobile" style="some:style;">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about.html">About us</a></li>
                <li><a href="/contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>