为用户选项创建菜单
为用户选项创建菜单
提问于 2018-10-12 02:37:19
我设计了这个面板，上面有一个头像。我想做的是有一个小菜单弹出当你点击头像图片，将有像，转到个人资料，添加朋友，下午这个人的选项。但我不确定该怎么做，因为我对jquery和css还很陌生。
因此，我期待着社区，看看我是否可以在如何实现这一点上获得一些想法或帮助。
这是我当前设置Example on 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>如果任何人能花点时间看看它，并帮助一些想法或解决方案，我如何才能做到这一点，那就太好了！
回答 1
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52766877
复制相关文章
相似问题