大家好，这里是初心Yearth，欢迎来到 10 mins css，每天花 10 分钟，实现要给简单精美的 css 效果。
那么下面我们直接进入正题，先来看看今天的效果展示吧：
分析
可以看到，这是一个简单的用户账户下拉菜单效果，想要实现这个效果，抓住一下几个关键点即可：
- 右上角的小尖角
- 菜单显示消失的动画效果
要走到这一步，我们先来实现这个菜单的样式，简单分析一下可以看到：
- 一个 title
- 一个 subtitle
- 若干 item
- 每个 item 左边是图标
- 当 item hover 的时候文字改变颜色
都是非常常规的样式，这里直接实现即可：
<div class="action">
<div class="profile"><img src="./static/avatar.jpg" alt="" /></div>
<div class="menu">
<h3>Someone Famouse <br /><span>Website Designer</span></h3>
<ul>
<li><img src="./static/profile.png" alt="" /><a href="#">My Profile</a></li>
<li><img src="./static/edit.png" alt="" /><a href="#">Edit Profile</a></li>
<li><img src="./static/inbox.png" alt="" /><a href="#">Inbox</a></li>
<li><img src="./static/settings.png" alt="" /><a href="#">Settings</a></li>
<li><img src="./static/help.png" alt="" /><a href="#">Help</a></li>
<li><img src="./static/logout.png" alt="" /><a href="#">Logout</a></li>
</ul>
</div>
</div>
:root {
--bg-color: #03a9f4;
--title-color: #555;
--title--font-size: 18px;
--subtitle-color: #cecece;
--subtitle--font-size: 14px;
--active-color: #ff5d94;
}
* {
margin: 0;
padding: 0;
}
body {
background: var(--bg-color);
width: 100vw;
height: 100vh;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
position: relative;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 80px;
right: -10px;
width: 200px;
padding: 10px 20px;
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
transition: 0.5s;
}
.action .menu h3 {
width: 100%;
text-align: center;
color: var(--title-color);
font-size: var(--title--font-size);
font-weight: 500;
padding: 20px 0;
line-height: 1.2rem;
}
.action .menu h3 span {
font-size: var(--subtitle--font-size);
color: var(--subtitle-color);
font-weight: 400;
}
.action .menu ul li {
list-style: none;
padding: 10px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
text-decoration: none;
color: var(--title-color);
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: var(--active-color);
}
效果如下：
现在，就只剩下上面提出的关键点了，我们一一分析。
要如何实现右上角的小尖角呢？
其实很简单：我们可以利用 before 伪类在 menu 的右上角做一个正方形，然后让其旋转 45° 即可：
+.action .menu::before {
+ content: "";
+ position: absolute;
+ top: -5px;
+ right: 28px;
+ width: 20px;
+ height: 20px;
+ background: #fff;
+ transform: rotate(45deg);
+}
效果如下：
接下来实现显示和消失的效果，我们可以借助 js，在点击的时候给 menu 添加或删除 active 类，通过 active 来实现 menu 的显示和消失：
@@ -8,7 +8,7 @@
</head>
<body>
<div class="action">
- <div class="profile"><img src="./static/avatar.jpg" alt="" /></div>
+ <div class="profile" onclick="menuToggle();"><img src="./static/avatar.jpg" alt="" /></div>
<div class="menu">
<h3>Someone Famouse <br /><span>Website Designer</span></h3>
<ul>
@@ -22,4 +22,10 @@
</div>
</div>
</body>
+ <script>
+ function menuToggle(params) {
+ const menu = document.querySelector(".menu");
+ menu.classList.toggle("active");
+ }
+ </script>
</html>
.action .menu {
position: absolute;
top: 80px;
right: -10px;
width: 200px;
padding: 10px 20px;
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
transition: 0.5s;
+ opacity: 0;
+ visibility: hidden;
}
+.action .menu.active {
+ opacity: 1;
+ visibility: visible;
+}
效果如下：
最后，我们可以看到最终效果，这个菜单是往下滑动消失的，想要实现这个效果其实也简单，只需要加上偏移即可：
.action .menu {
position: absolute;
- top: 80px;
+ top: 120px;
right: -10px;
width: 200px;
padding: 10px 20px;
visibility: hidden;
}
.action .menu.active {
+ top: 80px;
opacity: 1;
visibility: visible;
}
最终效果如下：
感兴趣的读者可以看看这个效果的在线 demo：用户帐户下拉菜单
