【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選でご紹介したMaterial Menuプラグインの解説をしたいと思います。
このjQueryプラグインはレスポンシブに対応しているドロワーメニュープラグインです。デモページのブラウザの幅を狭めていただいたらわかりやすいですが、通常ではinlineで並んでいる部分が狭めるとハンバーガーボタンが表示されます。

ハンバーガーボタンをクリックするとニョッキッとメニューが出てきます。
個人的にドロワーメニューで一番気になるのはメニューが表示されて通常のコンテンツ側をクリックした時にメニューが閉じるかということです。このプラグインはちゃんと閉じました。

jQuery本体とmaterialmenu.jquery.jsを読み込みます。jQuery本体は1.9以上を設定してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="materialmenu.jquery.js"></script>

デモページではstyle.cssとfoundation.cssが読み込まれています。

<link rel="stylesheet" href="foundation.css" />
<link rel="stylesheet" href="style.css" />

class=”material-menu-button”の中のspanがハンバーガーボタンになります。

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

style.cssを見ていただいたらわかる通り、768px以上のブラウザサイズではハンバーガーメニューは非表示。

/** 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);
    }
}

/body前に設置

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

オプションは以下のものもあるみたいです。

$(".material-menu nav > ul").materialmenu({
    /**
     * Define width of the window (in pixels) where starts mobile devices.
     * @type integer
     */
    mobileWidth: 768,
    /**
     * Width of the wrapper of menu. Works only on mbile.
     * @type integer
     */
    width: 250,
    /**
     * Time of animation.
     * @type integer
     */
    animationTime: 200,
    /**
     * Overlay opacity.
     * @type integer
     */
    overlayOpacity: 0.4,
    /**
     * Class of menu button that fires showing of menu.
     * @type string
     */
    buttonClass: 'material-menu-button',
    /**
     * If you want, you can define Your own menu button,
     * that be appended to generated title.
     * @type string
     */
    buttonHTML: '<div class="material-menu-button"><span></span><span></span><span></span></div>',
    /**
     * Page title, showed on mobile devices.
     * @type string
     */
    title: '',
    /**
     * Tells if title can be showed on mobile devices (only).
     * @type boolean
     */
    showTitle: false,
    /**
     * Number of pixels to scroll top, when title is showed on mobile devices.
     * If is 0, title will always be visible on top.
     * @type integer
     */
    titleShowOn: 40,
    /**
     * Fires when menu is opened.
     * @param  jQuery object element Menu (ul) object.
     * @return void
     */
    onOpen: function(element) {},
    /**
     * Fires when menu is closed.
     * @param  jQuery object element Menu (ul) object.
     * @return void
     */
    onClose: function(element) {},
    /**
     * Fires when window width is chenged from desktop to mobile.
     * @param  jQuery object element Menu (ul) object.
     * @return void
     */
    onChangeMobile: function(element) {
       element.parent().parent().addClass('vertical');
    },
    /**
     * Fires when window width is chenged from mobile to desktop.
     * @param  jQuery object element Menu (ul) object.
     * @return void
     */
    onChangeDesktop: function(element) {
        element.parent().parent().removeClass('vertical');
    },
    /**
     * Fires when title-bar is opened.
     * @param  jQuery object element Title-bar object.
     * @return void
     */
    onShowTitlebar: function(element) {},
    /**
     * Fires when title-bar is closed.
     * @param  jQuery object element Title-bar object.
     * @return void
     */
    onHideTitlebar: function(element) {}
});

Material MenuプラグインのライセンスはMITです。

• Tag
• jQuery
• Material Design
• Navigation
• Responsive