响应式导航栏响应式导航栏就是在pc和在移动端的渲染形式不一样HTML代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="index.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script></head><body> <div class="bars"> <span></span> <span></span> <span></span> </div> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">导航</a></li> <li><a href="#">产品</a></li> <li><a href="#">新闻</a></li> <li><a href="#">我们</a></li> </ul> </div></body></html>css样式*{ margin: 0; padding: 0;}body{ background: #000;}ul{ list-style: none;}a{text-decoration: none}.bars{ width: 60px; height: 60px; background: #fff; position: fixed; top: 0; left: 0; z-index: 1; }.bars span{ width: 30px; height: 2px; background: #000; position: absolute; left: calc(50% - 15px); top:calc(50% - 1px); transition: 0.1s;}.bars span:first-child{ transform: translateY(-10px);}.bars span:last-child{ transform: translateY(10px);}.bars.active span:first-child{ transform: rotate(45deg);}.bars.active span:nth-child(2){ transform: translateX(-100%); opacity: 0;}.bars.active span:last-child{ transform: rotate(-45deg);}.nav{ height: 60px; background: #fff; transition: .4s;}.nav ul{ float: right; display: flex;}.nav ul li{ border-right:1px solid rgba(0,0,0,.2); line-height: 60px;}.nav ul li:last-child{ border: 0;}.nav ul li a{ padding: 0 20px; display: block; color: #262626;}.nav ul li a:hover{ background: #262626; color: #fff;}.nav.active{ transform: translateX(-100%);}@media screen and (max-width:570px){ .nav{ height: 100vh; } .nav ul{ width: 100%; display: inherit; text-align: center; } .nav ul li{ border-bottom: 1px solid rgba(0,0,0,.2); }}js代码如下<script type="text/javascript"> $(".bars").click(function(){ $(".bars").toggleClass("active"); $(".nav").toggleClass("active"); }) </script> 运行结果如下图技术要点：媒体查询：当在手机的时候，需要先隐藏，点击的时候全部显示按钮的制作：用到了C3的动画运用到了js中的点击事件持续更新，欢迎大家指教！
