Bootstrap を使ってデザインしたアプリに Sidr でメニューを作成

Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。

このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない。 Facebook や Gmail の iPhone アプリみたいに、横からスライド表示されるメニューにしたい。

そこで、Sidr と Bootstrap を組み合わせて、それっぽいメニューを実装してみた。

Sidr - A jQuery plugin for creating side menus

この手のメニューを実装するプラグインは Sidr のほかに PageSlide や Snap なんかがあるけど、試した中では Sidr が一番 Bootstrap と組み合わせやすかった。他のは動かすだけで一苦労。

Bootstrap と Sidr を組み合わせたサンプルがこちら。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="sidr/stylesheets/jquery.sidr.dark.css" />
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a id="sidebar_button" href="#" class="btn btn-navbar" style="float:left;">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

          <a href="#" class="brand">Sample</a>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <table class="table">
          <tbody>
            <tr>
              <td>
                <input type="checkbox" />
                Task
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!--これがメニューになる-->
    <div id="sidr">
      <ul>
        <li>
        Lists
        <ul>
          <li><a href="#">list</a></li>
          <li><a href="#">list</a></li>
          <li><a href="#">list</a></li>
          <li><a href="#">list</a></li>
        </ul>
        </li>
        <li>
        Tags
        <ul>
          <li><a href="#">tag</a></li>
          <li><a href="#">tag</a></li>
          <li><a href="#">tag</a></li>
          <li><a href="#">tag</a></li>
        </ul>
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="sidr/jquery.sidr.min.js"></script>
    <script type="text/javascript">
      $(function() {
          var $tbody = $("tbody");
          var $template = $tbody.html();
          for (var i = 0; i < 20; i++) {
              $tbody.append($template);
          }
      });

      // サイドバーにする要素を指定しない場合、
      // id に sidr が設定された要素を使う。
      $("#sidebar_button").sidr();
</script>
  </body>
</html>