navbar書くのは面倒臭い!
bootstrap3を使ってサイトを作るときって、navbarを使うこと多いと思うのですが、これが結構複雑で書きにくいなーって感じた事はありませんか?実はnavbarを書くためだけのgemがあるのです!それが、bootstrap_nabvarです。今回はrailsで使う用のrails_bootstrap_navbarを紹介します。
導入方法
まずはGemfileに追加します。
gem 'rails_bootstrap_navbar'
そしてインストール。
bundle install
これで利用準備はできました。
使い方
使い方については、Usage with Bootstrap 3.xを見てください。
というと元も子もないので、ちょっと説明します。
bootstrap_navbarは、navbarのhtmlを記述するためのDSLなので、ネストして書いていくことになります。
ただし、複雑なnavbarをbootstrap_navbarだけで作るのは難しいです。
あくまでシンプルなものだけになります。なので、いざというときは普通にhtmlを記述する必要はあります。
= navbar fixed: :top do
= navbar_header brand: 'My Great App', brand_link: root_path
= navbar_collapse do
= navbar_group align: 'left' do
= navbar_item 'メニュー1', '#'
= navbar_item 'メニュー2', '#'
= navbar_item 'メニュー3', '#'
li = navbar_text 'ただのテキスト'
li
p.navbar-btn = link_to 'ボタン風リンク', '#', class: 'btn btn-default'
= navbar_group align: 'right' do
= navbar_dropdown '管理者' do
= navbar_item 'マイページ', '#'
= navbar_dropdown_devider
= navbar_item 'ログアウト', '#', nil, {:'data-method' => 'delete'}
navbar
navbar用のクラス付きのnavタグを生成します。オプションでバーを固定したり、レスポンシブ対応にできたりします。
navbar_header
モバイルのときに表示されるトグルメニューをこれだけで作成することができます。
オプションでnavbar上のサイト名(ブランド名?)を記述することもできます。
brandがある場合、brand_urlを省略すると、デフォルトで '/' にリンクが貼られます。
ただし、画像ロゴを出すときは自動で中央揃えにするのは難しそうなので、素直にhtmlを書くか、navbarに最適化されたロゴを準備したほうがよさそうです。
navbar_collapse
ロゴ以降の入れ物を準備します。
navbar_group
メニュー用のulタグを生成します。
navbar_item
メニュー用のliタグ付きのリンクを生成します。link_toを使ってリンクを生成するわけではないので、オプションには注意が必要です。
= navbar_item 'ログアウト', '#', nil, {:'data-method' => 'delete'}
ログアウトの記述のところで、{:'data-method' => 'delete'}と書いているのはそのためです。
navbar_text
navbar上でpタグを使ってちょうどいい位置にテキストを書いてくれます。
ただし、pタグしか生成しないため、navbar_group内で使うと、ulタグの子要素としてpタグができてしまうので注意が必要です。
= navbar_collapse do
= navbar_group align: 'left' do
= navbar_item 'メニュー1', '#'
li = navbar_text 'ただのテキスト'
こうすると、html的に綺麗かなと思います。
navbar上でリンクのボタンを綺麗に表示する
buttonタグでボタンを綺麗に表示するのは簡単なのですが(navbar_buttonメソッドを使う)、aタグのボタンを作るのが難しかったのでTipsとして載せておきます。
= navbar_collapse do
= navbar_group align: 'left' do
li
p.navbar-btn = link_to 'ボタン風リンク', '#', class: 'btn btn-default'
コツは、p.navbar-btnでリンクを囲んでしまうことです。
まだまだあります。
他にも、navbar内でフォームを作るためのメソッドも準備されているようです(試していません)。
さらに知りたい方は本家をご参照ください。
おまけ
ちなみに、middleman_bootstrap_navbarもあります!