layui左侧三级菜单2.0

标签: layui 三级菜单
28人阅读 评论(1) 收藏 举报
分类:

之前在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自定义ajax左侧三级菜单

HTML代码: 需引入layui.css代码 ...
  • zy1281539626
  • zy1281539626
  • 2017-03-20 10:49:45
  • 10090

使用layui实现的左侧菜单栏以及动态操作tab项

首先说一下左侧菜单栏:这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在到入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的:发现,绑定属性的菜单并...
  • nb7474
  • nb7474
  • 2018-03-01 15:45:56
  • 1521

layui学习笔记4--导航栏 菜单

导航栏 菜单 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;met...
  • Young_Fee
  • Young_Fee
  • 2018-03-06 23:20:20
  • 88

漂亮三级菜单 导航菜单 菜单

  • 2012年04月23日 11:15
  • 6KB
  • 下载

网页侧边栏三级菜单+面包屑导航栏

我的待办 借机管理 ...
  • luzhiweistudy
  • luzhiweistudy
  • 2017-04-29 09:22:28
  • 880

Bootstrap左侧下拉三级菜单导航

  • 2016年11月19日 09:36
  • 495KB
  • 下载

js左侧三级菜单导航实例代码

js 左侧三级菜单导航。 实例代码:  js 左侧三级菜单导航
  • vip_linux
  • vip_linux
  • 2013-09-13 21:03:57
  • 870

jQuery 三级菜单

在写这个的时候,首先要捋顺思路。点一个菜单的时候,其他的要闭合,点一级菜单的时候,二三级菜单要闭合,等等。 大致代码如下: 目录A ...
  • Sabrina_TSM
  • Sabrina_TSM
  • 2016-05-09 16:32:36
  • 1598

jquery easyui 三级菜单导航

  • 2017年01月03日 16:47
  • 511KB
  • 下载

Bootstrap3多级导航菜单 三级菜单

Bootstrap3多级导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web...
  • whx405831799
  • whx405831799
  • 2015-03-03 17:21:54
  • 14015
    个人资料
    持之以恒
    等级:
    访问量: 10万+
    积分: 1570
    排名: 3万+
    博客专栏
    最新评论