layui左侧三级菜单2.0
之前在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相关推荐
- layui自定义ajax左侧三级菜单
HTML代码: 需引入layui.css代码 <!-- 左侧的菜单 --> <div class="layui-side layui-bg-black" id=& ...
- js左侧三级菜单导航代码
效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- layui左侧菜单接口java实现:替代init.json
首先是创建菜单表结构,我写的写的字段比较多,实际要实现,不需要这么多字段 CREATE TABLE `menu` (`id` int(20) NOT NULL AUTO_INCREMENT,`pi ...
- Html+Css+jQuery左侧导航菜单三级联动
Html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- AXURE8.0制作二级菜单和三级菜单
今日分享:用AXURE8.0制作二级菜单和三级菜单 二级菜单 操作思路:首先做出一个[一级菜单]和三个[二级菜单],完成后再复制多个[一级菜单]和[二级菜单] 第一步:拖一个矩形,作为[一级菜单],命 ...
- Axure 制作左侧导航栏实现三级菜单效果
先放入菜单的相关元件,可以使用矩形,设置相应样式. 选中所有三级菜单,点击鼠标右键,选择转换为动态面板和设为隐藏,同时将面板命名为''ThreePanel''. 选中二级菜单和刚才设置的ThreePa ...
- css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display:none;的区别 、遮罩层效果、 三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器 兄弟选择器 属性选择器 伪类选择器 其他伪类选择器 类元素选择器 直接选择器 否定选择器 伪元素 :after清除浮动 :before和:after 用来写小三角形 首字母 ...
- Axure中继器实现三级菜单
在日常产品设计中,我们时常会使用到系统一级.二级.三级菜单等,那除了传统的动态面板设计菜单.矩形直接设计,有什么更便捷的方式吗,那就是用中继器实现三级菜单,下面我们一起来看看如何实现. 实现效果预览: ...
- 权限组件(10):三级菜单的展示和增删改查
效果图: 三级菜单的实现和一级.二级菜单差不多.需要注意的是增加三级菜单时,三级菜单是用户提交后在后台通过二级菜单的id添加的. 一.路由分发 rbac/urls.py ... from django ...
最新文章
- Mxnet - Understanding weight shape for Dense Layer MXNET权重参数形状的疑惑(内部设计形式行列谁在前不用管,多个转置运算而已)
- 《大话数据结构》读书笔记-线性表
- 五分钟学会使用 go modules(含在家办公使用技巧)
- 了解***的初级阶段---网络信息探测技巧
- Pytest之pytest-assume同用例多断言,断言1失败会执行后续代码及断言2
- 关于Python ord()和chr()返回ASCII码和Unicode码的看法
- Spring中Bean管理操作基于XML配置文件方法实现
- EOSIO 指南(浏览源码)
- 读源码Apache-commons-lang3-3.1(一)
- springBoot于tomcat7搭建websocket服务
- python 执行shell_python执行shell命令四法
- 黄聪:css3实现图片划过一束光闪过效果(图片光影掠过效果)
- 有一种存储英文单词的方法,是把单词的所有字母串在一个单链表上。为了节省一点空间,如果有两个单词有同样的后缀,就让它们共享这个后缀。下图给出了单词“loading”和“being”的存储形式。
- 【PS功能学习】04:祖传抠图技法
- 【国际象棋】棋盘游戏-微信小程序开发流程详解
- 虚拟主机和服务器的区别
- 现在开房都不需要在前台办理入住了?刺激
- 【机器学习】决策树(Decision Tree)
- matlab计算连续复利,求连续复利计算公式。。。
- 微软发布2010年度经典MSN签名
热门文章
- centos: firewalld 一
- myeclipse部署ssh项目工程
- Unicode : RLO
- C/C++ pthread 线程库的封装
- ASP.NET 文件下载 .
- Entity Framework 4 in Action读书笔记——第四章:使用LINQ to Entities查询:执行手动查询...
- silverlight开发无法调试问题
- 第二章 XHTML简介
- EL : Free Package of October
- 飞鸽传书2007 一个自己开发的软件