メニューバーやサイドバーをモバイル版に対応させる

Railsのviewでメニューバーやサイドバーをスマホ対応にさせる

bootstrapをつかうのでもし使えない場合は

Gemfile.rb

gem 'twitter-bootstrap-rails'

してbundle installします.
レイアウトとしてつかうので
_menubar.html.hamlという命名にしておきます.bootstrapでは、グリッドシステムもそうですが、
hidden-xs=>モバイルの画面の大きさだと見えなくなるクラス
visible-xs=>モバイルの画面の大きさでのみ見えるクラス
を提供しているのでこれを利用します

layouts/_menubar.html.haml

.slidebar-nav
  .navbar.visible-xs{role:"navigation"}
    .navabr-header
      %button.navbar-toggle.bg-dark{type:"button","data-toggle"=>"collapse", "data-target"=>"#custom-collapse"}
        %span.sr-only Toggle navigation
        %span.icon-bar.bg-white
        %span.icon-bar.bg-white
        %span.icon-bar.bg-white
      %span.visible-xs.navbar-brand.menubar-title=link_to "",root_path
.collapse.navbar-collapse#custom-collapse{style:"padding: 0px;"}
  .hidden-xs
    %h2= link_to "ここにnavbar-brandと同じタイトルを入れます",root_path
    .p-h-xs
  %ul.menubar-list-module
    /-#ここにmenubarのコンテンツを書きます
    %li=link_to "","".....
     ....
    %li =link_to "",""

こんな風にすればウインドウを小さくした時
タイトルとボタンが横並びになってくれるヘッダーが生成されます(^ ^)