纯css实现的凹槽底部导航菜单，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等

共1个文件

html：1个

底部导航

底部菜单

导航菜单

79 浏览量 2024-09-14 11:33:53 上传评论 1 收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

NavBar.zip （1个子文件）

NavBar

index.html 4KB

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>纯CSS实现内凹导航栏</title> <link href="https://at.alicdn.com/t/c/font_179247_uja3277echo.css" type="text/css" rel="stylesheet" /> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; } .nav{ width: 375px; height: 70px; padding: 0 15px; border-radius: 5px; background-color: #fff; position: relative; display: flex; } .nav dd{ width: 70px; height: 70px; position: relative; list-style: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } .nav dd i{ display: block; position: relative; height: 70px; line-height: 70px; text-align: center; font-size: 24px; transition: all 0.5s; } .nav dd span{ position:absolute; font-size: 12px; letter-spacing: 2px; transition: all 0.5s; opacity: 0; transform: translateY(20px); } .nav dd.on i{ transform: translateY(-35px); color: #ffffff; } .nav dd.on span{ opacity: 1; transform: translateY(10px); } .indicator{ position:absolute; top: -50%; width: 70px; height: 70px; background-color: #ff6a00; border-radius: 50%; transition: all 0.5s; border: 6px solid #f0f0f0; } .indicator::before{ content: ''; position: absolute; top: 50%; left: -23px; width: 21px; height: 21px; border-top-right-radius: 20px; box-shadow: 1px -10px 0 0 #f0f0f0; } .indicator::after{ content: ''; position: absolute; top: 50%; right: -23px; width: 21px; height: 21px; border-top-left-radius: 20px; box-shadow: -1px -10px 0 0 #f0f0f0; } dd:nth-child(1).on~.indicator{ transform: translateX(calc(70px * 0)); } dd:nth-child(2).on~.indicator{ transform: translateX(calc(70px * 1)); } dd:nth-child(3).on~.indicator{ transform: translateX(calc(70px * 2)); } dd:nth-child(4).on~.indicator{ transform: translateX(calc(70px * 3)); } dd:nth-child(5).on~.indicator{ transform: translateX(calc(70px * 4)); } </style> </head> <body> <dl class="nav"> <dd class="on">首页</dd> <dd>资讯</dd> <dd>发布</dd> <dd>消息</dd> <dd>我的</dd> <dt class="indicator"></dt> </dl> <script> const $dd = document.querySelectorAll('.nav dd'); $dd.forEach((item,index)=>{ item.addEventListener('click',function(){ $dd.forEach((_dd,_index)=>{ _dd.classList.remove('on'); this.classList.add('on'); }) }) }) </script> </body> </html>

评论收藏

内容反馈