导航相关

2023-03-20 13:40| 来源: 网络整理| 查看: 265

导航相关 - 页面元素导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情依赖加载模块：element 水平导航最新活动产品大数据解决方案移动模块后台模版电商平台社区最新活动产品大数据解决方案移动模块后台模版电商平台社区 //注意：导航依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… });

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

导航中的其它元素

除了一般的文字导航，我们还内置了图片和徽章的支持，如：

控制台9 个人中心我修改信息安全管理退了控制台9 个人中心我修改信息安全管理退了

是否瞬间上了个档次呢？

导航主题藏青导航产品大数据解决方案移动模块后台模版电商平台社区墨绿导航产品大数据解决方案移动模块后台模版电商平台社区艳蓝导航产品大数据解决方案移动模块后台模版电商平台社区

通过对导航追加CSS背景类，让导航呈现不同的主题色

//如定义一个墨绿背景色的导航 …

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

垂直/侧边导航默认展开选项1 选项2 跳转项解决方案移动模块后台模版电商平台产品大数据还原该导航演示

默认展开选项1 选项2 跳转解决方案移动模块后台模版电商平台产品大数据

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

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

导航可选属性/类

对导航元素结构设定可选属性和 CSS 类名，可让导航菜单项达到不同效果。目前支持的属性如下：

属性名可选值说明 lay-shrink 空值（默认）不收缩兄弟菜单子菜单 all收缩全部兄弟菜单子菜单展开子菜单时，是否收缩兄弟节点已展开的子菜单（注：layui 2.2.6 开始新增）如： … lay-unselect 无需填值点击指定导航菜单时，不会出现选中效果（注：layui 2.2.0 开始新增）如：刷新 lay-bar disabled禁用滑块跟随功能在导航菜单主容器中配置，如： CSS 类 layui-nav-child-c 子菜单居中对齐 layui-nav-child-r 子菜单向右对齐直接在子菜单标签配置即可，如： … 上述两项为 layui 2.6.6 开始新增面包屑

首页国际新闻亚太地区正文

你还可以通过设置属性 lay-separator="-" 来自定义分隔符。如：首页国际新闻亚太地区正文

【本文地址】

导航相关

导航相关

今日新闻

推荐新闻