为用户选项创建菜单

Question

我设计了这个带有头像的面板。我想做的是，当您单击头像图片时，会弹出一个小菜单，该图片具有诸如转到个人资料，添加朋友，pm 此人之类的选项。但是我不确定该怎么做，因为我仍然是jquery和css的新手。

因此，我正在向社区寻求一些想法或有关如何实现这一目标的帮助。

这是我目前在jsfiddle上设置的示例的小提琴

#recent-posts{
background: #D2C198;
}
#posts{
/*max-height: 90%;*/
overflow-y: auto;
}
.posts-container{
background-color: #D2C198;
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-header{
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 0.35rem 1.25rem;
}
.forum-badge{
float: left;
}
.forum-badge img, .last-poster-avatar img,
.reply-poster-avatar img, .reply-poster-guild-crest img{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
object-fit: cover;
}
.forum-badge img{
width: 100px;
height: 100px;
}
.divider{
border-bottom: 1px solid #222;
padding-top: 5px;
}
.post-details{
padding-top: 10px;
}
.last-poster{
display: inline-flex;
margin-left: 14px;
}
.post-description{
padding-left: 30px;
height: 25px;
margin-left: 86px;
}
.last-poster-avatar{
margin-right: 12px;
}
.last-poster-avatar img{
width: 50px;
height: 50px;
}
.post-statistics, .reply-poster-guild-detail{
float: right;
text-align: right;
}
.reply-poster-avatar, .reply-poster-detail, .reply-poster-guild-crest, .reply-poster-guild-detail{
display: inline-block;
}
.reply-poster-avatar{
vertical-align: top;
float: left;
}
.reply-poster-avatar img{
width: 75px;
height: 75px;
}
.reply-poster-detail{
/*width: 38.7%;*/
margin-left: 5px;
float: left;
}
.reply-poster-detail div{
text-align: left;
}
.reply-poster-guild-crest{
padding-top: 18px;
}
.reply-poster-guild-crest img{
width: 40px;
height: 40px;
}
.reply-poster-guild-detail,.reply-poster-detail{
top: 11px;
position: relative;
}
.reply-detail-container{
width: 100%;
text-align: center;
}
.replier-avatar-detail {
float: left;
display: inline-block;
}
.replier-avatar-detail,
.reply-poster-guild-detail {
max-width: 50%;
min-width: 45%;
}
<div id="recent-posts" class="card">
<div class="card-body">
<div id="posts">
<div class="card posts-container" id="a">
<div class="card-header post" data-toggle="collapse" data-target="#post-replies" aria-expanded="true" aria-controls="post-replies">
<div class="forum-badge">
<img src="https://i.postimg.cc/6QjQvk77/poedelve_copy.jpg" alt="Path of Exile">
</div>
<div class="post-container">
<div class="post-description">
<h5 class="mb-0"><div><!-- Post text goes here-->Sulphite WP farming is stupid as hell</div></h5>
<div class="divider"></div>
</div>
<div class="post-details">
<div class="last-poster">
<div class="last-poster-avatar">
<img src="https://i.postimg.cc/NfHQ0y7r/img_avatar.png" alt="Last Poster Avatar">
</div>
<div class="poster-detail-sm">
<div>Harold</div>
<div>3 hours ago</div>
</div>
</div>
<div class="post-statistics">
<div class="post-replies">
Replies <span>999</span>
</div>
<div class="post-views">
Views <span>999,999</span>
</div>
</div>
</div>
</div>
</div>
<!-- replies section -->
<div id="post-replies" class="collapse replies-container" aria-labelledby="a list of replies" data-parent="#posts"><!-- New replies must have dash and postnumber following post-replies e.g post-replies-223333 -->
<div class="card-body">
<!-- replies -->
<div id="replies"><!-- New replies must have dash and postnumber following replies e.g replies-223333 -->
<div class="card replies-container">
<div class="card-header reply" data-toggle="collapse" data-target="#reply-content" aria-expanded="true" aria-controls="reply-content"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
<div class="reply-detail-container">
<div class="replier-avatar-detail">
<div class="reply-poster-avatar">
<img src="https://i.postimg.cc/cJHx0FDd/female-default.png" alt="Poster's Avatar">
</div>
<div class="reply-poster-detail">
<div>Aurianna</div>
<div>2 hours ago</div>
</div>
</div>
<div class="reply-poster-guild-crest">
<img src="https://i.postimg.cc/yYH7k1fQ/Dragon-design.jpg" alt="Guild Crest">
</div>
<div class="reply-poster-guild-detail">
<div>House of Myrmadons</div>
<div>Rank: Officer</div>
</div>
</div>
</div>
<div id="reply-content" class="reply-message collapse" aria-labelledby="reply-header" data-parent="#replies"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
<div class="card-body poster-body">
Reply Content Here
</div>
</div>
</div>
<div class="card replies-container">
<div class="card-header reply" data-toggle="collapse" data-target="#reply-content1" aria-expanded="true" aria-controls="reply-content1"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
<div class="reply-detail-container">
<div class="replier-avatar-detail">
<div class="reply-poster-avatar">
<img src="https://i.postimg.cc/cJHx0FDd/female-default.png" alt="Poster's Avatar">
</div>
<div class="reply-poster-detail">
<div>Chris</div>
<div>2 hours ago</div>
</div>
</div>
<div class="reply-poster-guild-crest">
<img src="https://i.postimg.cc/yYH7k1fQ/Dragon-design.jpg" alt="Guild Crest">
</div>
<div class="reply-poster-guild-detail">
<div>House of GGG</div>
<div>Rank: CEO</div>
</div>
</div>
</div>
<div id="reply-content1" class="reply-message collapse" aria-labelledby="reply-header" data-parent="#replies"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
<div class="card-body poster-body">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
accusantium amet autem corporis, deserunt eaque facilis laborum magni nobis
officia officiis optio quibusdam, quisquam repellat velit. Molestiae non
temporibus voluptatum!
</div>
<div>Ad consequuntur corporis cum cumque dolorem hic incidunt iure natus
necessitatibus nihil obcaecati officiis quas quibusdam quis quo repellat
reprehenderit ut, vel vitae, voluptatum. Accusamus ad obcaecati odio vero
voluptas.
</div>
</div>
</div>
</div>
<div class="card replies-container">
<div class="card-header reply" data-toggle="collapse" data-target="#reply-content3" aria-expanded="true" aria-controls="reply-content3"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
<div class="reply-detail-container">
<div class="replier-avatar-detail">
<div class="reply-poster-avatar">
<img src="https://i.postimg.cc/cJHx0FDd/female-default.png" alt="Poster's Avatar">
</div>
<div class="reply-poster-detail">
<div>Chris</div>
<div>2 hours ago</div>
</div>
</div>
<div class="reply-poster-guild-crest">
<img src="https://i.postimg.cc/yYH7k1fQ/Dragon-design.jpg" alt="Guild Crest">
</div>
<div class="reply-poster-guild-detail">
<div>House of GGG</div>
<div>Rank: CEO</div>
</div>
</div>
</div>
<div id="reply-content3" class="reply-message collapse" aria-labelledby="reply-header" data-parent="#replies"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
<div class="card-body poster-body">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
accusantium amet autem corporis, deserunt eaque facilis laborum magni nobis
officia officiis optio quibusdam, quisquam repellat velit. Molestiae non
temporibus voluptatum!
</div>
<div>Ad consequuntur corporis cum cumque dolorem hic incidunt iure natus
necessitatibus nihil obcaecati officiis quas quibusdam quis quo repellat
reprehenderit ut, vel vitae, voluptatum. Accusamus ad obcaecati odio vero
voluptas.
</div>
</div>
</div>
</div>
</div>
<!-- End replies -->
</div>
</div>
</div>

如果有人可以花一些时间查看它并帮助我提供一些关于如何完成这项工作的想法或解决方案，那就太好了！

Answer 1

你可以在这里找到一些示例：

• https://bootsnipp.com/snippets/featured/account-in-navbar
• https://www.labw3.com/2014/08/round-avatar-with-drop-down-profiles-menu-code.html
• https://blog.teamtreehouse.com/stylish-custom-user-settings-dropdown-menu-with-css