layui多级菜单(六级)菜单代码(竖)
web Layui 2019-07-04 3015 0
关于本站

“最难不过坚持”

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

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6764638 2630 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(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">

版权声明:本篇文章来源于网络。 来源链接

相关推荐
layui垂直导航,鼠标经过去掉左侧的青色条块
Layui | 2019-07-05 8917
打开layui.css找到 .layui-nav-tree .layui-nav-bar{width:5px;height:0;background-color:#009688} 将width:5px改为width:0就可以了
layui栅格如何实现5等分,一行5列
Layui | 2019-07-05 6093
layui栅格如何实现5等分,一行5列? layui 栅格系统是12格的 不能实现5等分,可以自己仿照layui定义css样式 打开laui css查看源码 发现一等分是8.3%   layui是12格的; 所以 实现五等分 12/5*8.3% 就是19.9999992% 5等分,12格,大概每列占比是1...
评论:0条
评论加载中...
发表评论