更好的方法为用户配置文件栏 [英] Better approach for User Profile bar

查看：167
本文介绍了更好的方法为用户配置文件栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前在这里遇到一个小问题。我已经使用了这样的标记：



代码段



< pre（function）{$（this）。）。（function（）{$（this））。 closest（。user-profile）。toggleClass（open）; return false;}）;}）; 

  / * Reset * / * {margin：0; padding：0; list-style：none; font-size：12pt;} a {text-decoration：none;} / * Main CSS * /。user-profile {border：1px solid＃999; overflow：hidden;位置：相对; margin：25px 0;}。user-profile .user-thumb {border：1px solid＃999; margin：5px; padding：3px; border-radius：3px; float：left;}。user-profile p：first-child {margin：3px 0 0;}。user-profile .more-options {position：absolute; right：0; top：0;高度：100％; width：30px;背景：中心中心no-repeat #ccc; text-indent：-99px; overflow：hidden;}。user-profile .more-options-list {position：absolute; right：0; top：70px; border：1px solid＃999; width：100px; display：none; background-color：#fff;}。user-profile .more-options-list li，.user-profile .more-options-list li a {display：block;}。 {padding：5px;}。user-profile.open .more-options-list {display：block;}。user-profile.open .more-options，.user-profile .more-options：hover {background-color： ＃999;} / *测试大小* /。user-profile.default {width：250px;}。user-profile.mobile {width：auto;}。user-profile.large {width：500px;}。user-profile .small {width：100px;} / *背景图片，可以忽略。 * /用户配置文件。更多选项{背景图像：网址（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6 + EdigjL7ZHu / k72I796i9zRiSJPwG4VHX0Z + AxRzNRrtksUvwf7 + Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi + 3YV8DGMiT4VVuG7oiZpGzrZJhcs / hL49xtzH / Dy6bdfTsXYNY + 5yluWO4D4neK / ZUvok / 17X0HPBLsF + vuUlhfwX4j / rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN + 2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD + 0rbyoBc3SOjczohbyS1drbq6pQdqumllRC / 0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn + tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L + YGHNtd1FJitqPAR + hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY / jx4SMshe9LaJRpTvHr3C / ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY / + hpqwSyv0I0 / QMTRb7RMgBxNodTfSPqdraz / sDjzKBrv4zu2 + a2t0 / HHzjd2Lbcc2sG7GtsL42K + xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT / IPszSueHQqv6i / qluqF + oF9TfO2qEGTumJH0qfSv9KH0nfS / 9TIp0Wboi / SRdlb6RLgU5u ++ 9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8 / LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0 / EX + IzAreevPhe + CawpgP1 / pMTMDo64G0sTCXIM + KdOnFWRfQKdJvQzV1 + Bt8OokmrdtY2yhVX2a + qrykJfMq4Ml3VR4cVzTQVz + UoNne4vcKLoyS + gyKO6EHe + 75Fdt0Mbe5bRIf / wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN / 7HelL4t10t9F4gPdVzydEOx83Gv + uNxo7XyL / FTFL + u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO + 3NNmqaO53nVQqFQdRznpdlsPpBHhu / 7i91ud85a + WG / NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw / IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD + YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD + TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI / zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD + RcR85AyRBGQ7AAAAABJRU5ErkJggg ==）;}  

 < script src =https：//code.jquery .com / jquery-1.9.1.js>< / script>< div class =user-profile default> < img src =http://placehold.it/50class =user-thumb/> < div class =user-profile-meta> < p>< a href =＃>< strong>用户名< / strong>< / a>< / p& < p>< span>指定< / span>< / p> < / div> < a href =＃class =more-options>更多选项< / a> < ul class =more-option-list> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li>< a href =＃>注销< / a>< / li> < / ul>< / div>< div class =user-profile mobile> < img src =http://placehold.it/50class =user-thumb/> < div class =user-profile-meta> < p>< a href =＃>< strong>用户名< / strong>< / a>< / p& < p>< span>指定< / span>< / p> < / div> < a href =＃class =more-options>更多选项< / a> < ul class =more-option-list> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li>< a href =＃>注销< / a>< / li> < / ul>< / div>< div class =user-profile large> < img src =http://placehold.it/50class =user-thumb/> < div class =user-profile-meta> < p>< a href =＃>< strong>用户名< / strong>< / a>< / p& < p>< span>指定< / span>< / p> < / div> < a href =＃class =more-options>更多选项< / a> < ul class =more-option-list> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li>< a href =＃>注销< / a>< / li> < / ul>< / div>< div class =user-profile small> < img src =http://placehold.it/50class =user-thumb/> < div class =user-profile-meta> < p>< a href =＃>< strong>用户名< / strong>< / a>< / p& < p>< span>指定< / span>< / p> < / div> < a href =＃class =more-options>更多选项< / a> < ul class =more-option-list> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li>< a href =＃>注销< / a>< / li> < / ul>< / div>



问题



我想设计一个用户个人资料栏，在生活时，应该是这样：





这是我想实现的，当按钮被点击。还会发生什么，菜单不显示，因为我使用 overflow：hidden; 清除 float s。此菜单隐藏在其中。





我希望这是响应（嗯，只是使用 width 在不同的屏幕分辨率和实例的百分比），我想他们以此方式显示：







有一个更好的方式来实现呢？我也不知道如何使省略号显示，如果大小太小，请看代码片段中的 mobile 类。



预览



对于那些无法预览代码段的用户， b
$ b

预设检视。





已点击箭头。



解决方案

您需要使用 position ing这种情况。这是固定流体模型的情况：

  + ------- + ----------- + 
 | FIXED | FLUUUUUID | 
 + ------- + ----------- +


$ b b

或

  + ------- + ----------- + 
 | FIXED | FLUUUUUID | 
 | | FLUUUUUID | 
 + ------- + ----------- +


$ b b

为了解决这个问题，您需要使固定内容位于 absolute 一个固定的内容，你一定会知道尺寸。并给出父位置：相对和 padding-left 和 code>。在这种情况下，您应该从不使用 overflow：hidden 或 float 因此，请从您的CSS中删除这两个更改：

  .user-profile {border：1px solid＃999;位置：相对; margin：25px 0;} / *删除overflow：hidden; * / 
 .user-profile .user-thumb {border：1px solid＃999; margin：5px; fillding：3px; border-radius：3px;} / * Remove float：left; * /

相反，如前所述，添加 padding b 

  .user-profile {border：1px solid＃999;位置：相对; margin：25px 0; padding-left：68px; min-height：68px;} 
 .user-profile .user-thumb {border：1px solid＃999; margin：5px; padding：3px; border-radius：3px; position：absolute; top：0; left：0;}

神秘的 68px ：



68px 按以下方式计算：




  • 左边框： 5px

  • 左边框： 1px

  • 左填充： 3px
    • 宽度： 50px
  • 右侧填充： 3px

  • 右边距： 5px



因此， 5px + 1px + 3px + 50px + 3px + 1px + 5px = 68px 。



文字省略号



浏览器，您可以使用以下代码：

 （selector）{
 white- space：nowrap; 
 overflow：hidden; 
 text-overflow：ellipsis; 
}

只需将它添加到 .user-profile p 规则：

  .user-profile p {white-space：现在overflow：hidden; text-overflow：ellipsis;}

此外，最好有一个 z-index 到 position：absolute ，以与其他类似项目一起使用。因此，请添加：

  .user-profile .more-options-list {position：absolute; right：0; top：70px; border：1px solid＃999; width：100px; display：none; background-color：#fff; z-index：1;}

因此，最终代码是：



  $（function（）{$（。more-options）。点击（function（）{$（this）.closest（。user-profile）。toggleClass（open）; return false;}）;}）;

padding：0; list-style：none; font-size：12pt;} a {text-decoration：none;} / * Main CSS * /。user-profile {border：1px solid＃999;位置：相对; margin：25px 0; padding-left：68px; min-height：68px;}。user-profile .user-thumb {border：1px solid＃999; margin：5px; padding：3px; border-radius：3px; position：absolute; top：0; left：0;}。user-profile p {white-space：nowrap; overflow：hidden; text-overflow：ellipsis;}。user-profile p：first-child {margin：3px 0 0;}。user-profile .more-options {position：absolute; right：0; top：0;高度：100％; width：30px;背景：中心中心no-repeat #ccc; text-indent：-99px; overflow：hidden;}。user-profile .more-options-list {position：absolute; right：0; top：70px; border：1px solid＃999; width：100px; display：none; background-color：#fff; z-index：1;}。user-profile .more-options-list li，.user-profile .more-options-list li a {display：block;}。 padding：5px;}。user-profile.open .more-options-list {display：block;}。user-profile.open .more-options，.user-profile .more-options：hover {background-color： 999;} / *测试大小* /。user-profile.default {width：250px;}。user-profile.mobile {width：auto;}。user-profile.large {width：500px;}。 small {width：100px;} / *背景图片，可以忽略。 * /用户配置文件。更多选项{背景图像：网址（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6 + EdigjL7ZHu / k72I796i9zRiSJPwG4VHX0Z + AxRzNRrtksUvwf7 + Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi + 3YV8DGMiT4VVuG7oiZpGzrZJhcs / hL49xtzH / Dy6bdfTsXYNY + 5yluWO4D4neK / ZUvok / 17X0HPBLsF + vuUlhfwX4j / rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN + 2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD + 0rbyoBc3SOjczohbyS1drbq6pQdqumllRC / 0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn + tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L + YGHNtd1FJitqPAR + hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY / jx4SMshe9LaJRpTvHr3C / ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY / + hpqwSyv0I0 / QMTRb7RMgBxNodTfSPqdraz / sDjzKBrv4zu2 + a2t0 / HHzjd2Lbcc2sG7GtsL42K + xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT / IPszSueHQqv6i / qluqF + oF9TfO2qEGTumJH0qfSv9KH0nfS / 9TIp0Wboi / SRdlb6RLgU5u ++ 9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8 / LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0 / EX + IzAreevPhe + CawpgP1 / pMTMDo64G0sTCXIM + KdOnFWRfQKdJvQzV1 + Bt8OokmrdtY2yhVX2a + qrykJfMq4Ml3VR4cVzTQVz + UoNne4vcKLoyS + gyKO6EHe + 75Fdt0Mbe5bRIf / wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN / 7HelL4t10t9F4gPdVzydEOx83Gv + uNxo7XyL / FTFL + u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO + 3NNmqaO53nVQqFQdRznpdlsPpBHhu / 7i91ud85a + WG / NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw / IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD + YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD + TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI / zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD + RcR85AyRBGQ7AAAAABJRU5ErkJggg ==）;} 

 < script src =https：//code.jquery .com / jquery-1.9.1.js>< / script>< div class =user-profile default> < img src =http://placehold.it/50class =user-thumb/> < div class =user-profile-meta> < p>< a href =＃>< strong>用户名< / strong>< / a>< / p& < p>< span>指定< / span>< / p> < / div> < a href =＃class =more-options>更多选项< / a> < ul class =more-option-list> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li>< a href =＃>注销< / a>< / li> < / ul>< / div>< div class =user-profile mobile> < img src =http://placehold.it/50class =user-thumb/> < div class =user-profile-meta> < p>< a href =＃>< strong>用户名< / strong>< / a>< / p& < p>< span>指定< / span>< / p> < / div> < a href =＃class =more-options>更多选项< / a> < ul class =more-option-list> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li>< a href =＃>注销< / a>< / li> < / ul>< / div>< div class =user-profile large> < img src =http://placehold.it/50class =user-thumb/> < div class =user-profile-meta> < p>< a href =＃>< strong>用户名< / strong>< / a>< / p& < p>< span>指定< / span>< / p> < / div> < a href =＃class =more-options>更多选项< / a> < ul class =more-option-list> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li>< a href =＃>注销< / a>< / li> < / ul>< / div>< div class =user-profile small> < img src =http://placehold.it/50class =user-thumb/> < div class =user-profile-meta> < p>< a href =＃>< strong>用户名< / strong>< / a>< / p& < p>< span>指定< / span>< / p> < / div> < a href =＃class =more-options>更多选项< / a> < ul class =more-option-list> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li>< a href =＃>注销< / a>< / li> < / ul>< / div>



预览



这是打开和不打开菜单时的显示方式。







希望这可以帮助你实现你想要的。


I am currently stuck with a small issue here. I have used a mark-up like this:

Snippet

$(function () {
  $(".more-options").click(function () {
    $(this).closest(".user-profile").toggleClass("open");
    return false;
  });
});

/* Reset */
* {margin: 0; padding: 0; list-style: none; font-size: 12pt;}
a {text-decoration: none;}

/* Main CSS */
.user-profile {border: 1px solid #999; overflow: hidden; position: relative; margin: 25px 0;}
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;}
.user-profile p:first-child {margin: 3px 0 0;}
.user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;}
.user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff;}
.user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;}
.user-profile .more-options-list li a {padding: 5px;}
.user-profile.open .more-options-list {display: block;}
.user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;}

/* Testing Sizes */
.user-profile.default {width: 250px;}
.user-profile.mobile {width: auto;}
.user-profile.large {width: 500px;}
.user-profile.small {width: 100px;}

/* Background Image, Can be ignored. */
.user-profile .more-options {background-image: url("data:image/png;base64,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");}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="user-profile default">
  <img src="http://placehold.it/50" class="user-thumb" />
  <div class="user-profile-meta">
    <p><a href="#"><strong>Username</strong></a></p>
    <p><span>Designation</span></p>
  </div>
  <a href="#" class="more-options">More Options</a>
  <ul class="more-options-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</div>

<div class="user-profile mobile">
  <img src="http://placehold.it/50" class="user-thumb" />
  <div class="user-profile-meta">
    <p><a href="#"><strong>Username</strong></a></p>
    <p><span>Designation</span></p>
  </div>
  <a href="#" class="more-options">More Options</a>
  <ul class="more-options-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</div>

<div class="user-profile large">
  <img src="http://placehold.it/50" class="user-thumb" />
  <div class="user-profile-meta">
    <p><a href="#"><strong>Username</strong></a></p>
    <p><span>Designation</span></p>
  </div>
  <a href="#" class="more-options">More Options</a>
  <ul class="more-options-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</div>

<div class="user-profile small">
  <img src="http://placehold.it/50" class="user-thumb" />
  <div class="user-profile-meta">
    <p><a href="#"><strong>Username</strong></a></p>
    <p><span>Designation</span></p>
  </div>
  <a href="#" class="more-options">More Options</a>
  <ul class="more-options-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</div>

Problem

I am trying to design a User Profile Bar, which when live, it should be this way:

This is what I am trying to achieve here, when the button is clicked. And also what happens is, the menu doesn't get displayed, because I have used overflow: hidden; to clear the floats. The menu is hidden inside.

I would like that to be responsive (well, just using percentages of width in different screen resolutions and instances), I would like them to display this way:

Is there a better way to achieve it? Also I am not sure how I could make the ellipsis to show, if the size is too small, see the mobile class in the snippet.

Preview

For those, who cannot preview the snippet, it would display this way:

Default view.

Arrow has been clicked.

解决方案

You need to use positioning for this case. This is a case of Fixed-Fluid Model:

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

Or

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

To tackle this, you need to make the fixed content to be positioned absolute and I guess, being a fixed content, you will surely know the dimensions. And give the parent position: relative and a padding-left and min-height of those dimensions. You should never use overflow: hidden or floats in this case. So remove both from your CSS and make these changes:

.user-profile {border: 1px solid #999; position: relative; margin: 25px 0;} /* Remove overflow: hidden; */
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px;} /* Remove float: left; */

Instead, as said before, add padding, min-height for the parent and position: absolute for the child:

.user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;}
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;}

The mysterious 68px:

The 68px is calculated by this way:

  • Left Margin: 5px
  • Left Border: 1px
  • Left Padding: 3px
  • Width: 50px
  • Right Padding: 3px
  • Right Margin: 1px
  • Right Border: 5px

So, 5px + 1px + 3px + 50px + 3px + 1px + 5px = 68px.

Text Ellipsis

For the ellipsis to work on major browsers, you can use the following code:

(selector) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Just add this to the .user-profile p rule:

.user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

Also, it is always better to have a z-index in place for position: absolute items to work well with other similar items. So please add:

.user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;}

So, the final code would be:

$(function () {
  $(".more-options").click(function () {
    $(this).closest(".user-profile").toggleClass("open");
    return false;
  });
});

/* Reset */
* {margin: 0; padding: 0; list-style: none; font-size: 12pt;}
a {text-decoration: none;}

/* Main CSS */
.user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;}
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;}
.user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.user-profile p:first-child {margin: 3px 0 0;}
.user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;}
.user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;}
.user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;}
.user-profile .more-options-list li a {padding: 5px;}
.user-profile.open .more-options-list {display: block;}
.user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;}

/* Testing Sizes */
.user-profile.default {width: 250px;}
.user-profile.mobile {width: auto;}
.user-profile.large {width: 500px;}
.user-profile.small {width: 100px;}

/* Background Image, Can be ignored. */
.user-profile .more-options {background-image: url("data:image/png;base64,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");}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="user-profile default">
  <img src="http://placehold.it/50" class="user-thumb" />
  <div class="user-profile-meta">
    <p><a href="#"><strong>Username</strong></a></p>
    <p><span>Designation</span></p>
  </div>
  <a href="#" class="more-options">More Options</a>
  <ul class="more-options-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</div>

<div class="user-profile mobile">
  <img src="http://placehold.it/50" class="user-thumb" />
  <div class="user-profile-meta">
    <p><a href="#"><strong>Username</strong></a></p>
    <p><span>Designation</span></p>
  </div>
  <a href="#" class="more-options">More Options</a>
  <ul class="more-options-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</div>

<div class="user-profile large">
  <img src="http://placehold.it/50" class="user-thumb" />
  <div class="user-profile-meta">
    <p><a href="#"><strong>Username</strong></a></p>
    <p><span>Designation</span></p>
  </div>
  <a href="#" class="more-options">More Options</a>
  <ul class="more-options-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</div>

<div class="user-profile small">
  <img src="http://placehold.it/50" class="user-thumb" />
  <div class="user-profile-meta">
    <p><a href="#"><strong>Username</strong></a></p>
    <p><span>Designation</span></p>
  </div>
  <a href="#" class="more-options">More Options</a>
  <ul class="more-options-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</div>

Preview

This is how it appears with and without the menu open.

Hope this helps you to achieve what you want.

这篇关于更好的方法为用户配置文件栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆