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

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

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

下拉菜单 layui

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

参考来源网址稍微做了点修改，加了下拉菜单提示箭头，上移了一点下拉菜单位置

效果图：

from clipboard

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <style>
        .layui-layout-left{position: absolute !important; left: 0px; top: 0;}
        /*layui child nav*/
        .layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0;  box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
        .layui-nav .layui-nav-child a{color: white;}
        .layui-nav .layui-nav-child a:hover{background-color:deepskyblue; color: white;}
        .layui-nav-child dd{position: relative;}
        .layui-nav-child dd.layui-this{background-color: transparent; color: white;}
        .layui-nav .layui-nav-child dd.layui-this a{background-color: transparent; color: white;}
        .layui-nav-child dd.layui-this:after{display: none;}
        /*layui third level nav*/
        .layui-nav-third-child{display: none; position: absolute; left: 105px;top:0px;min-width: 100%; line-height: 36px; padding: 5px 0;  box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
        .layui-nav .layui-nav-third-child a{color: white;}
        .layui-nav .layui-nav-third-child a:hover{background-color:deepskyblue; color: white;}
        .layui-nav-third-child li{position: relative;}
        .layui-nav-third-child li{background-color: transparent; color: white;}
        .layui-nav .layui-nav-third-child li.layui-this a{background-color: transparent; color: white;}
        .layui-nav-third-child li:after{display: none;}
    </style>
</head>
<body class="layui-layout-body ">
<div class="layui-layout layui-layout-admin layui-bg-blue">

    <div class="layui-header layui-bg-blue">
         <div style="margin-left: 20px">
             <b style="font-size: 35px">船信保密安全综合管控平台</b><br>
             <b>CSIT integrated Control System of Confidentiality and Security</b>

         </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="#">基本资料</a></dd>
                    <dd><a href="#">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>
    <div class="layui-header layui-bg-blue">
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="#">控制台</a></li>
            <li class="layui-nav-item"><a href="#">商品管理</a></li>
            <li class="layui-nav-item"><a href="#">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child layui-bg-blue">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                    <dd>
                        <a href="javascript:;" class="third-class">其它系统2<i class="layui-icon layui-icon-triangle-r" style="position:absolute;right:5px"></i></a>
                        <ol class="layui-nav-third-child layui-bg-blue">
                            <li><a href="">邮件管理2</a></li>
                            <li><a href="">消息管理2</a></li>
                            <li><a href="">授权管理2</a></li>
                        </ol>
                    </dd>
                    <dd>
                        <a href="javascript:;" class="third-class">其它<i class="layui-icon layui-icon-triangle-r" style="position:absolute;right:5px"></i></a>
                        <ol class="layui-nav-third-child layui-bg-blue">
                            <li><a href="">邮件管理3</a></li>
                            <li><a href="">消息管理3</a></li>
                            <li><a href="">授权管理3</a></li>
                        </ol>
                    </dd>

                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">内容主体区域</div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script>
//JavaScript代码区域
    layui.use(['element','jquery'], function(){
        var element = layui.element,$=layui.jquery;
        $(".layui-nav-third-child").hide();
        $(".third-class").on('mouseover',function () {
            $(".layui-nav-third-child").hide();
			$(this).next().show();
        });
    });
</script>
</body>
</html>

赏

前一篇

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

后一篇

“最难不过坚持”

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

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

layui栅格如何实现5等分，一行5列