読者です 読者をやめる 読者になる 読者になる

NOT SO BADなブログ

Towards a not so bad world.

BootStrap3でSidrつかってメニューを横スライドさせてみる。

技術系


(photo credit: MightyBoyBrian via photopin cc)

BootStrap3はモバイルファーストに設計されてて、
スマホサイズで見ると自動的にメニューが折りたたまれてトグルボタンになってくれる。

ただデフォルトやとドロップダウンになるので、これをfacebookとかみたいな
いまどきの横スライドメニューにしたい。

SidrってライブラリでBootstrap用に最適化しつつ組み込んでみたのでメモ。

基本的なやり方はこちらのブログをほぼ参考にさせてもらってます。

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

BootStrap3に対応したクラス名に修正したのと、
ナビゲーションバーを固定してるときの対応を追加してみました。

環境

  • Rails 4.0
  • BootStrap 3.0

(twitter-bootstrap-rails Gemを使用)

セットアップ

まずは公式サイトからダウンロード。

Sidr

vendor/assetsディレクトリにjsとcssをそれぞれ配置。
で、application.js/cssで読み込む。

#app/assets/stylesheets/application.css
*= require jquery.sidr.dark

#app/assets/javascripts/application.js
//= require jquery.sidr.min

jsとかはたぶんjQueryの後に追加したほうがいい気がする。

Bootstrapに最適化(BS3バージョン)

もともとのクラスとかは変えずにうまいことスライドされるようになるのがゴール。
なのでviewのほうはいじらずにjsで設定していきます。

#app/assets/script.js.coffee
jQuery ->
  $('.navbar-header button.navbar-toggle')
    .sidr({
      source: '.navbar-collapse.collapse',

これでとりあえずスライドするところまではできるはず。

ただこれやともともとのドロップダウンも表示されちゃうので、それを消す処理を追加。

#app/assets/script.js.coffee
jQuery ->
  $('.navbar-header button.navbar-toggle')
    .attr('data-toggle', '')
    .attr('data-target', '')
    .sidr({
      source: '.navbar-collapse.collapse',
      renaming: false,

あとデフォルトやとsidrの中のclass名とかが全部sidr-class-xxxとかってリネームされちゃうので、
renaming: falseのオプションつけて阻止しとく。

いい感じです。

Fixed Navbar用に最適化

しかしナビゲーションをfixedにしてると、横にスライドさせたときに
ヘッダー部分がスライドしなくて戻れない。。

オフィシャルのドキュメント見てるとcall backの設定ができるみたいやったので、
これでサイドメニュー表示してるときだけfixedを解除してみる。

あと戻るときは一瞬で戻すとスライドのアニメーションを追い越しちゃうので
150ms後に設定を戻すように微調整。

ここまで追加した完成版はこちら。

#app/assets/script.js.coffee
jQuery ->
  $('.navbar-header button.navbar-toggle')
    .attr('data-toggle', '')
    .attr('data-target', '')
    .sidr({
      source: '.navbar-collapse.collapse',
      renaming: false,
      onOpen: ->
        $('.navbar-fixed-top').css('position', 'absolute');
        $('.navbar-rightbutton').css('position', 'absolute');
        $('.navbar-header button.navbar-toggle').css('position', 'absolute');
      onClose: ->
        setTimeout ->
          $('.navbar-fixed-top').css('position', 'fixed');
          $('.navbar-header button.navbar-toggle').css('position', 'fixed');
          $('.navbar-rightbutton').css('position', 'fixed');
        , 150
  });

デフォルトのデザインがbox-shadowとかすごいかかっててクドい感じなので
あとはそのへんを微調整して完成。

いい感じのスライドインメニューができました。