之前在layui 1.0的时候写过一个三级菜单,那时候用三级菜单还要自己扩展,与后台交互也显得麻烦,现在新版本的layui自动就可以实现三级菜单了,很多朋友在问,我就帮大家整理了一下样式大家可以改改,直接上代码:

<link rel="stylesheet" type="text/css" href="css/layui.css" />
<script src="layui.all.js"></script><ul class="layui-nav layui-nav-tree" ><li data-name="home" class="layui-nav-item"><a href="javascript:;" lay-tips="主页" lay-direction="2"><i class="layui-icon layui-icon-home"></i><cite>主页</cite><span class="layui-nav-more"></span></a><dl class="layui-nav-child"><dd data-name="console" class="layui-this"><a lay-href="home/console.html">控制台</a></dd></dl></li><li data-name="component" class="layui-nav-item layui-nav-itemed"><a href="javascript:;" lay-tips="组件" lay-direction="2"><i class="layui-icon layui-icon-component"></i><cite>组件</cite><span class="layui-nav-more"></span></a><dl class="layui-nav-child"><dd data-name="grid"><a href="javascript:;">栅格<span class="layui-nav-more"></span></a><dl class="layui-nav-child"><dd data-name="list"><a lay-href="component/grid/list.html">等比例列表排列</a></dd><dd data-name="mobile"><a lay-href="component/grid/mobile.html">按移动端排列</a></dd></dl></dd><dd data-name="button"><a lay-href="component/button/index.html">按钮</a></dd></dl></li>
</ul>

这里提醒一下,要加载layui.all.js,加载layui.js菜单收缩功能无效。
只要按这种写法,应该是可以实现无限级菜单的。与后台交互的时候用地柜算法就可以全部遍历出来,这里没有写实例,如果遇到问题的可以留言交流,谢谢。

layui左侧三级菜单2.0相关推荐

  1. layui自定义ajax左侧三级菜单

    HTML代码: 需引入layui.css代码 <!-- 左侧的菜单 --> <div class="layui-side layui-bg-black" id=& ...

  2. js左侧三级菜单导航代码

    效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  3. layui左侧菜单接口java实现:替代init.json

    首先是创建菜单表结构,我写的写的字段比较多,实际要实现,不需要这么多字段 ​ CREATE TABLE `menu` (`id` int(20) NOT NULL AUTO_INCREMENT,`pi ...

  4. Html+Css+jQuery左侧导航菜单三级联动

    Html部分 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" ...

  5. AXURE8.0制作二级菜单和三级菜单

    今日分享:用AXURE8.0制作二级菜单和三级菜单 二级菜单 操作思路:首先做出一个[一级菜单]和三个[二级菜单],完成后再复制多个[一级菜单]和[二级菜单] 第一步:拖一个矩形,作为[一级菜单],命 ...

  6. Axure 制作左侧导航栏实现三级菜单效果

    先放入菜单的相关元件,可以使用矩形,设置相应样式. 选中所有三级菜单,点击鼠标右键,选择转换为动态面板和设为隐藏,同时将面板命名为''ThreePanel''. 选中二级菜单和刚才设置的ThreePa ...

  7. css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display:none;的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结

    目录 css3新增选择器 兄弟选择器 属性选择器 伪类选择器 其他伪类选择器 类元素选择器 直接选择器 否定选择器 伪元素 :after清除浮动 :before和:after 用来写小三角形 首字母 ...

  8. Axure中继器实现三级菜单

    在日常产品设计中,我们时常会使用到系统一级.二级.三级菜单等,那除了传统的动态面板设计菜单.矩形直接设计,有什么更便捷的方式吗,那就是用中继器实现三级菜单,下面我们一起来看看如何实现. 实现效果预览: ...

  9. 权限组件(10):三级菜单的展示和增删改查

    效果图: 三级菜单的实现和一级.二级菜单差不多.需要注意的是增加三级菜单时,三级菜单是用户提交后在后台通过二级菜单的id添加的. 一.路由分发 rbac/urls.py ... from django ...

最新文章

  1. Mxnet - Understanding weight shape for Dense Layer MXNET权重参数形状的疑惑(内部设计形式行列谁在前不用管,多个转置运算而已)
  2. 《大话数据结构》读书笔记-线性表
  3. 五分钟学会使用 go modules(含在家办公使用技巧)
  4. 了解***的初级阶段---网络信息探测技巧
  5. Pytest之pytest-assume同用例多断言,断言1失败会执行后续代码及断言2
  6. 关于Python ord()和chr()返回ASCII码和Unicode码的看法
  7. Spring中Bean管理操作基于XML配置文件方法实现
  8. EOSIO 指南(浏览源码)
  9. 读源码Apache-commons-lang3-3.1(一)
  10. springBoot于tomcat7搭建websocket服务
  11. python 执行shell_python执行shell命令四法
  12. 黄聪:css3实现图片划过一束光闪过效果(图片光影掠过效果)
  13. 有一种存储英文单词的方法,是把单词的所有字母串在一个单链表上。为了节省一点空间,如果有两个单词有同样的后缀,就让它们共享这个后缀。下图给出了单词“loading”和“being”的存储形式。
  14. 【PS功能学习】04:祖传抠图技法
  15. 【国际象棋】棋盘游戏-微信小程序开发流程详解
  16. 虚拟主机和服务器的区别
  17. 现在开房都不需要在前台办理入住了?刺激
  18. 【机器学习】决策树(Decision Tree)
  19. matlab计算连续复利,求连续复利计算公式。。。
  20. 微软发布2010年度经典MSN签名

热门文章

  1. centos: firewalld 一
  2. myeclipse部署ssh项目工程
  3. Unicode : RLO
  4. C/C++ pthread 线程库的封装
  5. ASP.NET 文件下载 .
  6. Entity Framework 4 in Action读书笔记——第四章:使用LINQ to Entities查询:执行手动查询...
  7. silverlight开发无法调试问题
  8. 第二章 XHTML简介
  9. EL : Free Package of October
  10. 飞鸽传书2007 一个自己开发的软件