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