导航菜单

导航菜单

导航菜单包含水平导航和垂直导航， 在 2.x 版本中，nav 组件属于 element 模块的子集。

水平导航

一般用于页面头部菜单。样式规则如下：

通过 class="layui-nav" 设置导航容器

通过 class="layui-nav-item" 设置导航菜单项

追加 className 为 layui-this 可设置菜单选中项

通过 class="layui-nav-child" 设置导航子菜单项

追加 className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐

常规用法

备注：滑块效果仅跟随不存在子菜单的菜单项。

加入徽章等元素

导航主题

给导航容器追加任意背景色 class，内置背景色参考：#背景色公共类

垂直导航

一般用于左侧侧边菜单。样式规则如下：

在水平导航的 class 规则上，通过设置 class="layui-nav layui-nav-tree" 定义垂直导航容器。

通过 class="layui-nav-itemed" 设置父菜单项为展开状态

通过给导航容器追加 class="layui-nav-side" 可设置侧边垂直导航

其余结构及填充内容与水平导航完全相同

侧边垂直导航

API

API

描述

var element = layui.element

获得 element 模块。

element.render('nav', 'filter')

导航菜单 nav 组件渲染。

渲染

element.render('nav', filter);

参数 'nav' 是渲染导航的固定值

参数 filter : 对应导航容器 lay-filter 的属性值或2.9.15+指定元素的 jQuery 对象

nav 组件会在元素加载完毕后，自动对导航完成一次渲染，因此该方法主要用于对动态插入的导航元素的初始化渲染。

属性

属性

描述

lay-accordion 2.8.18+

导航容器属性。用于开启垂直导航菜单展开时的手风琴效果。如：

lay-bar

导航容器属性。用于禁用滑块跟随功能。如：

lay-unselect

导航菜单项属性。 设置后，点击对应菜单项时，不会出现选中效果。

事件

element.on('nav(filter)', callback)

参数 nav(filter) 是一个特定结构。

nav 为导航事件固定值；

filter 为导航容器属性 lay-filter 对应的值。

参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

当点击导航父级菜单和二级菜单时触发。示例：

面包屑导航

面包屑导航主要用于指示当前页面所处的位置，并能返回到上级页面。

面包屑导航渲染

element.render('breadcrumb', filter);

参数 'breadcrumb' 是渲染面包屑导航的固定值

参数 filter : 对应面包屑导航容器 lay-filter 的属性值或2.9.15+指定元素的 jQuery 对象

该方法主要用于对动态插入的面包屑导航的初始化渲染，用法同上述导航菜单。