【jQuery】レスポンシブに最適なメニュープラグインMaterial Menu

【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選でご紹介したMaterial Menuプラグインの解説をしたいと思います。
このjQueryプラグインはレスポンシブに対応しているドロワーメニュープラグインです。デモページのブラウザの幅を狭めていただいたらわかりやすいですが、通常ではinlineで並んでいる部分が狭めるとハンバーガーボタンが表示されます。
material_menu_1
ハンバーガーボタンをクリックするとニョッキッとメニューが出てきます。
個人的にドロワーメニューで一番気になるのはメニューが表示されて通常のコンテンツ側をクリックした時にメニューが閉じるかということです。このプラグインはちゃんと閉じました。
material_menu_2

jQuery

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>

CSS

デモページでは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です。

 
materialmenu

【jQuery】レスポンシブに最適なメニュープラグインMaterial Menu

  • LATEST
  • RELATED
  • POPULAR