请问一个非常简单简洁的自适应导航栏

HTML结构

<div class="nav">     <span class="nav-on"><i></i><i></i><i></i></span>     <ul>         <li><a href="#">首页</a></li>         <li><a href="#">栏目一</a></li>         <li><a href="#">栏目二</a></li>     </ul> </div>

JS代码

$(".nav-on").click(function() {     $(".nav > ul").slideToggle(); });

CSS代码

.nav {     line-height: 50px;     background: #0099cc;     position: relative; }  .nav li {     float: left; }  .nav li a {     display: block;     padding: 0 20px;     color: #fff; }  .nav span.nav-on {     display: none;     width: 20px;     position: absolute;     top: 12px;     right: 12px;     cursor: pointer; }  .nav-on i {     display: block;     width: 100%;     height: 5px;     background: #fff;     margin-bottom: 5px; }  /* 手机端CSS代码 */ @media screen and (max-width: 768px) {     .nav ul {         display: none;         width: 100%;     }      .nav ul li {         width: 100%;     }      .nav span.nav-on {         display: block;     } }

标签：一个简单的 一个简单的人是个什么样的人 非常简单的人 很简单的一个人意思 而且特别简单 

更新日期：2025-03-09 00:35:53  来源：网络 

下一篇：请问万网怎么修改网站内容，通过万网后台管理修改网站内容的步骤

上一篇：请问一个服务器可以搭建几个网站