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

【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です。