2

gmail、ワードプレス、およびユーザーが自分のアバターをクリックしてメニュー項目を選択できる他の多くのアプリのようなドロップダウン メニューを作成したいと考えています。

これは私が行ったことであり、アバターのサイズを 19x19 に維持した場合にのみ機能します。サイズを大きくしようとすると、ナビゲーション バーが台無しになります。

助言がありますか？

<ul class="nav pull-right" id="main-menu-right"  style='font-size:12px;'>
    <% if signed_in? %>
        <li id="fat-menu" class="dropdown">
            <a href="#" id="dropUser" role="button" class="dropdown-toggle" data-toggle="dropdown">

            <%= current_user.avatar_file_name.nil? ? raw("<i class='icon-user'></i>") : image_tag(current_user.avatar.url(:square_tiny), size: '19x19', class: "img-rounded") %>
            <b class="caret"></b>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropUser">       
                 <li><%= link_to raw("<i class='icon-user'></i> My Profile"), "/user_profiles/show", :tabindex => "-1" %></li>

                 <li class="divider"></li>
                 <li><%= link_to raw("<i class='icon-dashboard'></i> Admin dashboard"), admin_dashboard_path, :tabindex => "-1" if current_user.has_role? :admin %></li>
                 <li><%= link_to( raw("<i class='icon-off'></i> Logout"), destroy_user_session_path, :method => :delete) %></li>
            </ul>
              </a>
         </li>
    <% else %>   
        <li>
        <div class="btn-group">
            <%= link_to(raw("<i class='icon-lock'></i> Sign in"), new_user_session_path, :class => 'btn',  style: 'font-size:12px;') %> 
            <%= link_to(raw("Sign up"), new_registration_path(resource_name), :class => 'btn',  style: 'font-size:12px;') %>
        </div>
        </li>
<% end %>

4

2 に答える 2

2

HTML:

        <div class="nav navbar-right">
            <div class="navbar-text">
                <img src="http://placehold.it/60x60" class="profile-image img-circle">
                <a href="#">Username</a>
            </div>
        </div>

CSS:

.navbar .profile-image{
    margin: -10px 0px;
    height: 40px;
}
于 2014-11-24T15:30:22.317 に答える
1

問題は、メニュー項目のデフォルトの行の高さが原因です。このようにアバターをULから移動した場合、レイアウトを機能させることができますか？http://jsfiddle.net/panchroma/dJS2k/

アバターの左側にプロフィールリンクがありますが、その下に配置できなかった理由はありません。

私はそれがあなたが説明するものと正確に一致しないことを知っていますが、それはあなたがどんなサイズのアバターでも使うことを可能にします。一般的なhtmlは次のようになります。 

<navbar>
<img src="avatar.jpg" class="pull-right">
  <ul class="pull-right">
    <li class="dropdown"><li></li>
  </ul>
</navbar>
于 2013-03-22T17:33:47.810 に答える