更好的方法为用户配置文件栏

更新时间：2022-10-16 23:00:01

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

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

$ b b

或

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

$ b b

为了解决这个问题，您需要使固定内容位于 absolute 一个固定的内容，你一定会知道尺寸。并给出父$ c>位置：相对和 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 $ c $ 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 $ c>

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

文字省略号

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

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

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

  .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 |
+-------+-----------+

+-------+-----------+
| 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,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/FtFl8z9ZAHF4bBsrEwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAXFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDQuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KQ+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/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.

上一篇 : ：NGINX和环境变量来自配置文件下一篇 : Python/Selenium/Firefox:无法使用指定的配置文件路径启动 firefox

更好的方法为用户配置文件栏

相关阅读

技术问答最新文章