2

我想在 gmail、wordpress 和许多其他应用程序中创建一个下拉菜单，用户可以在其中单击他的头像来选择菜单项。

这是我所做的，只有当我将头像尺寸保持在 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 回答