[サイドメニューのドロワー機能について]

Question

■やりたいこと

• サイドメニューをボタンクリックで一旦非表示にし、ブラウザを広くする
• もう一度ボタンクリックで元に戻す（ボタンに拘りなし）
• メニューは最初から表示しておき、邪魔な時だけしまえる方がいい

↓

■コメント

• jquery-drawer
• jquery.mmenu
• push-menu

といったjqueryもインストールして試してみたのですが、
使い方がイマイチ分からずにいます。

プラグインを使用しなくても実装できるのであれば大歓迎なのですが…。

因みに言語はbackboneが好ましいです。

---

main.html

<div id="page">
  <nav class="navi">
    <div id="header"></div>
    <div id="menu"></div>
  </nav>
  <div id ="main">
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

---

menu.html

<ul class="navi" id="menu">
  <li>
    <a href="page_link">Page001</a>
  </li>
  <li>
    <a href="page_link">Page002</a>
  </li>
  <li>
    <a href="page_link">Page003</a>
  </li>
</ul>

---

content.js

var jquery = require('jqueryの読み込み');

export default Marionette.Content.extend({
  template: Template,

  regions: {
    header     : '#header',
    menu       : '#menu',
    content    : '#content',
    footer     : '#footer',
  },

  ui: {
    menuButton : '#menu-on',
  },
  events: {
    'click ui.menuButton' : '_menuButton'
  },
  _menuButton : function() {
    // ???
  }
});

---

■参考サイト

• Drawer
• mmenu
• Slide and Push Menus

Answer 1

• 変更点

　　・jqueryのプラグインインストールは行わない
・ドラッグではなくボタン切り替え

var jquery = require('jqueryの読み込み');

export default Marionette.Content.extend({
  template: Template,

  regions: {
    header     : '#header',
    menu       : '#menu',
    content    : '#content',
    footer     : '#footer',
  },

  ui: {
    menuButton : '#menu-on',
  },
  events: {
    'click ui.menuButton' : '_menuButton'
  },
  _menuButton : function() {

    $('#menu').toggle();
/* 
  toggleを使用して表示切り替えが可能になる。
  メニューが消えた後のコンテンツ部分拡大縮小については
  toggleClassでCSSの書き換えを行う

    :例）
      $('#content-name').toggleClass('content-page-resize');
---
      ex.css
        content-page-resize
        {
          margin: 0px;
        }
*/ 
  }
});