弹出菜单
点击后旋转弹出菜单
<button id="exportWord" type="submit" class="btn btn-sm btn-primary " onclick="document.getElementsByTagName('nav')[0].className = 'menu menu_active'">导出word</button> <nav class="menu panel panel-default"> <p onclick="document.getElementsByTagName('nav')[0].className = 'menu'">关闭</p> <ol> <li class="menu-item listing"><a href="#0" data-text="listing">一人有限公司</a> <ol class=sub-menu"> <li class="menu_item listing_process"><a data-text="process">公司挂牌申请流程</a></li> <li class="menu_item one_listing"><a href="#0" data-text="one">一人有限公司挂牌</a></li> <li class="menu_item many_listing"><a href="#0" data-text="multi">多人有限公司挂牌</a></li> </ol> </li> </ol> <ol> <li class="menu-item"><a href="#0">多人有限公司</a> <ol class=sub-menu"> <li class="menu_item"><a href="#0">公司挂牌申请流程</a></li> <li class="menu_item"><a href="#0">多人有限公司挂牌</a></li> </ol> </li> </ol> </nav> </div>
css
nav a { color: inherit; text-decoration: none; } nav { line-height: 1.4; font-family: "Space Mono", monospace; background: rgba(236, 236, 236, 0.12); padding: 25px 35px; width: 350px; top: calc(40vh); left: calc(25vw); position: fixed; border-radius: 16px; box-shadow: 0 0 60px -15px black; transform: scale(0) rotate(360deg); transition: all 0.75s; font-size: 18px; /* opacity:0.9; filter:alpha(opacity=90);*/ } nav.menu_active { transform: scale(1) rotate(0deg); } nav > ol > li { margin: 20px 0; color: #ff6c18; } nav > ol > li:first-of-type { color: #ff6c18; } nav > ol > li > ol { margin: 10px 0 0 20px; border-left: 1px solid #4d4d4c; color: #4d3c7d; } nav > ol > li > ol > li { margin: 7px 0; padding-left: 20px; } nav a:hover { color: #dd925f; } nav p { font-family: "Roboto Mono", monospace; float: right; cursor: pointer; font-size: 16px; color: #1642dc; transition: all 0.2s; } nav p:hover { border-bottom: 2px dotted #cfd8dc; padding-bottom: 5px; }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决