导航菜单

Jquery固定折叠侧边栏菜单插件

阿里云

这是一款 jquery 固定折叠侧边栏菜单插件。该则跌侧边栏采用扁平化设计,通过折叠可以展开和收缩多级菜单,适合用于制作网站后台的侧边栏。

使用方法:

在页面中引入 jquery,以及 nav.css 和 nav.js 文件。

也想出现在这里?联系我们
创客主机
  1. <link href="css/iconfont.css" rel="stylesheet">                  
  2. <link href="css/nav.css" rel="stylesheet">
  3. <script type="text/javascript" src="js/jquery.min.js"></script>
  4. <script type="text/javascript" src="js/nav.js"></script>

HTML 结构:

该 jquery 固定折叠侧边栏菜单的 HTML 结构如下:

  1. <div class="nav">
  2.     <div class="nav-top">
  3.         <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="images/mini.png" ></div>
  4.     </div>
  5.     <ul>  
  6.         <li class="nav-item">
  7.             <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i class="my-icon nav-more"></i></a>
  8.             <ul>
  9.                 <li><a href="javascript:;"><span>网站设置</span></a></li>
  10.                 <li><a href="javascript:;"><span>友情链接</span></a></li>
  11.                 <li><a href="javascript:;"><span>分类管理</span></a></li>
  12.                 <li><a href="javascript:;"><span>系统日志</span></a></li>
  13.             </ul>
  14.         </li>
  15.         <li class="nav-item">
  16.             <a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i class="my-icon nav-more"></i></a>
  17.             <ul>
  18.                 <li><a href="javascript:;"><span>站内新闻</span></a></li>
  19.                 <li><a href="javascript:;"><span>站内公告</span></a></li>
  20.                 <li><a href="javascript:;"><span>登录日志</span></a></li>
  21.             </ul>
  22.         </li>
  23.         <li class="nav-item">
  24.             <a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span><i class="my-icon nav-more"></i></a>
  25.             <ul>
  26.                 <li><a href="javascript:;"><span>订单列表</span></a></li>
  27.                 <li><a href="javascript:;"><span>打个酱油</span></a></li>
  28.                 <li><a href="javascript:;"><span>也打酱油</span></a></li>
  29.             </ul>
  30.         </li>
  31.     </ul>
  32. </div>

Jquery 固定折叠侧边栏菜单插件

已有 446 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!