隐藏菜单显示
【摘要】
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<titl...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Menu Button Interaction</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="list-container">
<button class="more-button" aria-label="Menu Button">
<div class="menu-icon-wrapper">
<div class="menu-icon-line half first"></div>
<div class="menu-icon-line"></div>
<div class="menu-icon-line half last"></div>
</div>
</button>
<ul class="more-button-list">
<li class="more-button-list-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
</svg>
<span>Settings</span>
</li>
<li class="more-button-list-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
</svg>
<span>Copy</span>
</li>
<li class="more-button-list-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share">
<path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13"/>
</svg>
<span>Share</span>
</li>
<li class="more-button-list-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2">
<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"/>
</svg>
<span>Delete</span>
</li>
</d>
</div>
<div class="socials">
<a class="social-link" href="https://twitter.com/aybukeceylan" target="_top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
</svg>
</a>
<a class="social-link" href="https://www.linkedin.com/in/ayb%C3%BCkeceylan/" target="_top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
</a>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #84a0f4;
background-image: linear-gradient(to top, #84a0f4 0%, #c2e9fb 100%);
font-family: "Montserrat", sans-serif;
}
.list-container {
position: relative;
}
.list-container.active .more-button-list {
opacity: 1;
transform: scale(1);
}
.list-container.active .more-button-list-item {
-webkit-animation: fadeInItem 0.6s 0.2s forwards;
animation: fadeInItem 0.6s 0.2s forwards;
}
.list-container.active .more-button-list-item:nth-child(2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.list-container.active .more-button-list-item:nth-child(3) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.list-container.active .more-button-list-item:nth-child(4) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.list-container.active .more-button {
-webkit-animation: onePulse 0.6s forwards linear;
animation: onePulse 0.6s forwards linear;
}
.list-container.active .menu-icon-wrapper {
transform: rotate(-45deg);
}
.list-container.active .menu-icon-line.first {
transform: rotate(-90deg) translateX(1px);
}
.list-container.active .menu-icon-line.last {
transform: rotate(-90deg) translateX(-1px);
}
.more-button {
background-color: #5c67ff;
box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
border-radius: 50%;
width: 50px;
height: 50px;
border: none;
padding: 0;
cursor: pointer;
transition: 0.2s ease-in;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
position: relative;
z-index: 2;
}
.more-button:hover, .more-button:focus {
box-shadow: 0px 0px 0px 8px rgba(92, 103, 255, 0.3);
background-color: #4854ff;
}
.more-button:focus {
outline: 0;
}
.more-button-list {
background-color: #fff;
border-radius: 8px;
list-style-type: none;
width: 140px;
height: 170px;
box-shadow: 0px 0px 4px 4px rgba(150, 157, 249, 0.16);
padding: 0;
padding: 6px;
position: absolute;
right: 24px;
bottom: 0;
opacity: 0;
transform: scale(0);
transform-origin: bottom right;
transition: all 0.3s ease 0.1s;
}
.more-button-list li {
opacity: 0;
}
.more-button-list-item {
display: flex;
align-items: center;
color: #1c3991;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
transition: 0.2s ease-in;
transform: translatex(-10px);
}
.more-button-list-item:hover {
color: #5c67ff;
}
.more-button-list-item:after {
content: "";
position: absolute;
height: 1px;
width: calc(100% - 24px);
left: 12px;
bottom: 0;
background-color: rgba(132, 160, 244, 0.1);
}
.more-button-list-item:last-child:after {
display: none;
}
.more-button-list-item svg {
width: 18px;
height: 18px;
}
.more-button-list-item span {
display: inline-block;
line-height: 20px;
font-size: 14px;
margin-left: 8px;
}
@-webkit-keyframes onePulse {
0% {
box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3);
}
50% {
box-shadow: 0px 0px 0px 12px rgba(92, 103, 255, 0.1);
}
100% {
box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
}
}
@keyframes onePulse {
0% {
box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3);
}
50% {
box-shadow: 0px 0px 0px 12px rgba(92, 103, 255, 0.1);
}
100% {
box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
}
}
@-webkit-keyframes fadeInItem {
100% {
transform: translatex(0px);
opacity: 1;
}
}
@keyframes fadeInItem {
100% {
transform: translatex(0px);
opacity: 1;
}
}
.socials {
position: fixed;
bottom: 16px;
right: 16px;
display: flex;
align-items: center;
}
.social-link {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
margin-right: 12px;
}
.menu-icon-wrapper {
border-radius: 2px;
width: 20px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
transition: transform 330ms ease-out;
}
.menu-icon-line {
background-color: #fff;
border-radius: 2px;
width: 100%;
height: 2px;
}
.menu-icon-line.half {
width: 50%;
}
.menu-icon-line.first {
transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
transform-origin: right;
}
.menu-icon-line.last {
align-self: flex-end;
transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
transform-origin: left;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
document.querySelector('.more-button').addEventListener('click', function () {
document.querySelector('.list-container').classList.toggle('active');
});
- 1
- 2
- 3
文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。
原文链接：fizzz.blog.csdn.net/article/details/119180579
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）