关于导航 首先看一下官网的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><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">
<!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function () {
var element = layui.element;

//…
});
</script>
</body>
</html>

***：这个东东需要你加载element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。

设定layui-this来指向当前页面分类。

垂直导航需要追加class：layui-nav-tree 
侧边导航需要追加class：layui-nav-tree layui-nav-side

全都是加到ul的calss中。其实导航差不多也就这么点。

layui导航的更多相关文章

  1. layui导航栏和layui.layui.msg问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. layui导航的使用

    在项目开发的时候,需要后台的系统好看点,左边的导航需要设计为多级的,而且要点击当前的链接页面,刷新后要实现选中状态 学习源头:http://www.layui.com/doc/element/nav. ...

  3. Layui导航、面包屑

    物不在多,有用则精! 学习使用链接 导航:导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在.面包屑结构简单,支持自定义分隔符.千万不要忘了加载 elem ...

  4. [转]layui点击左侧导航栏，实现不刷新整个页面，只刷新局部

    本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...

  5. 监听导航新增Tab选项卡-layui

    1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...

  6. layui禁止某些导航菜单展开

    官网上查得监听导航菜单的点击 当点击导航父级菜单和二级菜单时触发,回调函数返回所点击的菜单DOM对象: element.on('nav(filter)', function(elem){ consol ...

  7. layui 3种导航栏

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html ...

  8. layui禁用侧边导航栏点击事件

    layui是一款优秀的前端模块化css框架,作者是贤心 —— 国内的一位前端大佬. 我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然, ...

  9. layui水平导航条三级

    需求 需要做一个顶部的水平导航条,有三级,展开的时候二级和三级一起展开,结果如图: 效果 一级菜单 二级标题   三级菜单 三级菜单 二级标题   三级菜单 三级菜单 一级菜单 二级标题   三级菜单 ...

随机推荐

  1. 深入浅出具有划时代意义的G1垃圾回收器

    G1诞生的背景 Garbage First(简称G1)收集器是垃圾收集器技术发展历史上的里程碑式的成果,它开创了收集器面向局部收集的设计思路和基于Region的内存布局形式.HotSpot开发团队最初 ...

  2. 一个漂亮的JavaScript“警告”替代品

    下载 一个漂亮的JavaScript"警告"替代品 安装 $ npm安装-节省sweetalert 使用 从"sweetalert"进口swal; 横波测井(& ...

  3. 远程触发Jenkins的Pipeline任务

    场景 虽然能配置提交代码时触发Jenkins任务,但有时并不需要每次提交代码都触发,而是仅在有需要时才执行. 除了在Jenkins页面上手动执行任务,还可以向Jenkins网站发起HTTP请求,触发指 ...

  4. MySQL基础 ：基本知识点大纲

  5. Docker笔记6：Docker 常见命令及镜像管理

    目  录 一.Docker 常用命令 docker version 命令 docker info 命令 二.Docker 镜像管理 搜索镜像:docker search 镜像名 获取镜像:docker ...

  6. 多测师讲解IDE工具python_001.2pycham_安装

    PyCharm安装使用教程 Pycharm 是目前 Python 语言最好用的集成开发工具. 下载 Pycharm 载时有两种版本选择 Professional(专业版,收费)和Community(社 ...

  7. 99%的Android开发不得不面对的三道坎，到底该怎么破？

    今年比往年要特殊一些,受疫情的影响,很多公司都出现了裁员现象.以至于最近很多技术同学也在纷纷向我倒苦水. 王鹏便是其中的一员,王鹏之前是在一线城市的一家小型互联网公司做Android应用开发.从毕业实 ...

  8. RDS 事务型数据库sql

    -- 替换json中数据 select SUBSTRING_INDEX(SUBSTRING_INDEX('[{"channelCode":"MOBIL",&qu ...

  9. C语言-入门级编程语言--编程小白首选

    我们都知道计算机很厉害,利用计算机可以高效地处理和加工信息,随着计算机技术的发展,计算机的功能越来越强大,不但能够处理数值信息,而且还能处理各种文字.图形.图像.动画.声音等非数值信息.   在199 ...

  10. spring boot:接收数组参数及多文件混合json参数(spring boot 2.3.4)

    一,生产环境中的复杂参数上传的场景 1,保存排序值 : 例如:某一件商品的多张展示图片排序,提交的排序值要和图片的id相对应 2,上传多张图片,图片要和指定的变量相对应 例如:在添加商品sku时, 需 ...