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菜单收缩功能无效。
只要按这种写法,应该是可以实现无限级菜单的。与后台交互的时候用地柜算法就可以全部遍历出来,这里没有写实例,如果遇到问题的可以留言交流,谢谢。

你可能感兴趣的:(web前端,layui)