layui多级菜单（六级）菜单代码（竖）

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

下拉菜单 layui

打开边栏(ESC) 关闭边栏(ESC)

layui官方提供的折叠菜单只有二级，其实，扩展到多级很简单，先看下效果图：

from clipboard

下面是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<ul class="layui-nav layui-nav-tree">
    <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">
            <i class="layui-icon layui-icon-component"></i>
            <cite>一级</cite>
            <span class="layui-nav-more"></span>
       	</a>
        <dl class="layui-nav-child">
            <dd>
                <a href="javascript:;">
                	<i class="layui-icon layui-icon-release"></i>
                	<cite>二级</cite>
                	<span class="layui-nav-more"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a><i class="layui-icon layui-icon-cellphone"></i><cite>三级</cite></a>
                    </dd>
                    <dd>
                        <a><i class="layui-icon layui-icon-cellphone"></i><cite>三级</cite></a>
		                <dl class="layui-nav-child">
		                    <dd>
		                        <a><i class="layui-icon layui-icon-vercode"></i><cite>四级</cite></a>
		                    </dd>
		                    <dd>
		                        <a><i class="layui-icon layui-icon-vercode"></i><cite>四级</cite></a>
				                <dl class="layui-nav-child">
				                    <dd>
				                        <a><i class="layui-icon layui-icon-username"></i><cite>五级</cite></a>
						                <dl class="layui-nav-child">
						                    <dd>
						                        <a><i class="layui-icon layui-icon-face-surprised"></i><cite>六级</cite></a>
						                    </dd>
						                    <dd>
						                        <a><i class="layui-icon layui-icon-face-surprised"></i><cite>六级</cite></a>
						                    </dd>
						                </dl>
				                    </dd>
				                    <dd>
				                        <a><i class="layui-icon layui-icon-username"></i><cite>五级</a>
				                    </dd>
				                </dl>
		                    </dd>
		                    <dd>
		                        <a><i class="layui-icon layui-icon-vercode"></i><cite>四级</cite></a>
		                    </dd>
		                    <dd>
		                        <a><i class="layui-icon layui-icon-vercode"></i><cite>四级</cite></a>
		                    </dd>
		                </dl>
                    </dd>
                    <dd>
                        <a><i class="layui-icon layui-icon-cellphone"></i><cite>三级</a>
                    </dd>
                </dl>
            </dd>
            <dd>
                <a href="javascript:;">
                	<i class="layui-icon layui-icon-release"></i>
                	 <cite>二级</cite>
                </a>
            </dd>
        </dl>
    </li>
</ul>

<script src="layui/layui.js"></script>
<script>
	layui.use('element', function() {
		var element = layui.element;
	});
</script> 
</body>
</html>

注意，这里的下拉菜单的箭头，可写可不写：

<span class="layui-nav-more"></span>

上面的代码即箭头代码，如果不写的话，layui会检测当前菜单后面是否有子菜单：

<dl class="layui-nav-child">

上面的即子菜单，如果有的话，会自动加上箭头。

注：如果希望菜单占满整个左侧，即高度全屏，高度不够用背景色填充的效果的话，只要在父容器多加个“layui-nav-side”即可，如下：

<ul class="layui-nav layui-nav-tree layui-nav-side">

赏

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

layUI 三级导航菜单的实现（横）