iOS7の登場で少し風潮が変わりつつありますが、FacebookとかYoutubeなんかのスマホ版でよく使われているメニューボタンをタップすると、左側からメニューがスライドして現れるやつ。

メジャーサイト・アプリがあれを採用してるので、ユーザーも「あのシマシマのボタン押せばメニューが出るはず」って認識になってるかと思われます。

んで、Twitter Bootstrap2.3ではResponsive navbarを使うことによって、画面幅が狭いとメニューが自動的に「「あのシマシマのボタン」に変わってくれます。が、上からズリっと落ちてくるタイプ。どーせなら、横からズリっと出てくるやつにデフォルトでして欲しいですが・・・

そんなわけでブートストラップをサイドメニューにする方法を探したら、ドンピシャで解説してるポストがありました。すばらしい！！

Bootstrapにサイドメニュー(スライドイン)を追加する方法

このポストをみればたぶん実装できます。

もしできない場合は、セレクタ指定がサンプルと違うのかもしれません。Bootstrapのバージョンとかで多少違うのかも。オレもそのままではできなかったんで各要素にIDを振って実現できました。

具体的には・・・

（１）トリガーとなるボタンの部分にmenu_linkっていうIDを振って

<script type="text/javascript" charset="UTF-8">

$(document).ready(function() {

  $('#menu_link')

    .attr('data-toggle', '')

    .attr('data-target', '')

    .sidr({

      source: '#side_menu'

  });

});

</script>

 

これで完成。

 

↑こんなやつがBootstrapに簡単に組み込めます。

 

以上はBootstrap標準のnavbar（画面上のメニュー）を使ったときのやつですが、例えば左側に普通にULでサイドメニューを作ってるときでもSidrを使って、BootstrapのResponsive utility classesを使って.visible-phoneとか.hidden-desktopを使うと実現可能です。

 

これは、ずっと前からやりたくて、ようやく最近実現できたんですが、iOS7でまたまたインターフェースが変わっちゃうっていうｗ　この手法もすでに過去のモノなのかしら？