Twitter Bootstrap を使用しています。それは非常にうまく機能し、ナビゲーションバーはうまく機能します。レスポンシブでそれに応じて調整されますが、デスクトップで画面を縮小したり、携帯電話でサイトをプルアップしたりすると、すでに画面の束を占有している展開から始まります. 展開するオプションを使用して、折りたたまれた状態から始めたいと思います。
コードは以下のとおりです。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">My Site</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li <% if @league=='recruiting' %>class="active"<% end %>><%= link_to "Recruiting", :controller => "league", :action=>"index", :league=>"recruiting" %></li>
<li <% if @league=='college' %>class="active"<% end %>><%= link_to "College", :controller => "league", :action=>"index", :league=>"college" %></li>
<li <% if @league=='nfl' %>class="active"<% end %>><%= link_to "NFL", :controller => "league", :action=>"index", :league=>"nfl" %></li>
</ul>
<ul class="nav pull-right">
<li><a href="/blog">Blog</a></li>
<li <% if params[:controller]=='chart' %> class="active"<% end %>><a href="/data/all/hundred">Data</a></li>
<% if user_signed_in? %>
<li><%= link_to "My Profile", user_profile_path(:username => current_user.username) %></li><li><%= link_to('Logout', destroy_user_session_path, :method => :delete) %></li>
<% else %>
<li><%= link_to "Login", "#login-lightbox", 'data-toggle'=>"modal", 'id'=>'login-link' %></li>
<% end %>
</ul>
</div>
</div>
</div>
</div>