HTML+CSS+JS 动态展开式菜单
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML:
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态展开式菜单</title> <link rel="stylesheet" href="./14-动态展开式菜单.css"> </head>
<body> <div class="menu-box"> <div class="menu-button"> <div class="line-box"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <ul class="menu-list"> <li><i class="fa fa-sliders"></i><span>设置</span></li> <li><i class="fa fa-clone"></i><span>复制</span></li> <li><i class="fa fa-share-square-o"></i><span>分享</span></li> <li><i class="fa fa-trash-o"></i><span>删除</span></li> </ul> </div> </body>
</html>
<script src="./14-动态展开式菜单.js"></script> |
CSS:
|
* { margin: 0; padding: 0; }
body { height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(to top left, #84a0f4, #c2e9fb); }
body::before { content: "点击右下角"; color: #fff; font-size: 32px; text-shadow: 0 3px 3px #4c6ed3; }
.menu-box { position: fixed; bottom: 40px; right: 40px; }
.menu-button { width: 50px; height: 50px; background-color: #5c67ff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(92, 103, 255, 0.3); color: #fff; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; cursor: pointer; transition: 0.2s ease-in; }
.menu-button:hover { background-color: #4854ff; box-shadow: 0 0 0 8px rgba(92, 103, 255, 0.3); }
.menu-button .line-box { width: 20px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: transform 0.3s ease-out; }
.menu-button .line { background-color: #fff; width: 100%; height: 2px; border-radius: 2px; }
.menu-button .line:first-child { width: 50%; transform-origin: right; transition: transform 0.3s ease-in-out; }
.menu-button .line:last-child { width: 50%; align-self: flex-end; transform-origin: left; transition: transform 0.3s ease-in-out; }
.menu-list { width: 140px; height: 160px; background-color: #fff; border-radius: 8px; list-style: none; padding: 6px; box-shadow: 0 0 4px 4px rgba(92, 103, 255, 0.15); position: absolute; right: 15px; bottom: 15px; opacity: 0; transform: scale(0); transform-origin: bottom right; transition: 0.3s ease; transition-delay: 0.1s; }
.menu-list li { display: flex; align-items: center; padding: 10px; color: #1c3991; cursor: pointer; position: relative; opacity: 0; transform: translateX(-10px); transition: 0.2s ease-in; }
.menu-list li:hover { color: #5c67ff; }
.menu-list li::before { content: ""; width: calc(100% - 24px); height: 1px; background-color: rgba(92, 103, 255, 0.1); position: absolute; bottom: 0; left: 12px; }
.menu-list li:last-child::before { display: none; }
.menu-list .fa { font-size: 18px; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; }
.menu-list span { font-size: 14px; margin-left: 8px; }
.active .line-box { transform: rotate(-45deg); }
.active .line-box .line:first-child { transform: rotate(-90deg) translateX(1px); }
.active .line-box .line:last-child { transform: rotate(-90deg) translateX(-1px); }
.active .menu-list { opacity: 1; transform: scale(1); }
.active .menu-list li { animation: fade-in-item 0.4s linear forwards; }
.active .menu-list li:nth-child(1) { animation-delay: 0.1s; }
.active .menu-list li:nth-child(2) { animation-delay: 0.2s; }
.active .menu-list li:nth-child(3) { animation-delay: 0.3s; }
.active .menu-list li:nth-child(4) { animation-delay: 0.4s; }
@keyframes fade-in-item { 100% { transform: translateX(0); opacity: 1; } } |
JS:
|
const menu_box=document.querySelector('.menu-box'); const menu_button=document.querySelector('.menu-button');
menu_button.addEventListener('click',function(){ menu_box.classList.toggle('active'); }) |
