搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

导航相关 - 页面元素

导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情
依赖加载模块:element

HTML结构code

  1. <ul class="layui-nav" lay-filter="">
  2. <li class="layui-nav-item"><a href="">最新活动</a></li>
  3. <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  4. <li class="layui-nav-item"><a href="">大数据</a></li>
  5. <li class="layui-nav-item">
  6. <a href="javascript:;">解决方案</a>
  7. <dl class="layui-nav-child"> <!-- 二级菜单 -->
  8. <dd><a href="">移动模块</a></dd>
  9. <dd><a href="">后台模版</a></dd>
  10. <dd><a href="">电商平台</a></dd>
  11. </dl>
  12. </li>
  13. <li class="layui-nav-item"><a href="">社区</a></li>
  14. </ul>
  15. <script>
  16. //注意:导航 依赖 element 模块,否则无法进行功能性操作
  17. layui.use('element', function(){
  18. var element = layui.element;
  19. //…
  20. });
  21. </script>

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


导航中的其它元素


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

HTML结构code

  1. <ul class="layui-nav">
  2. <li class="layui-nav-item">
  3. <a href="">控制台<span class="layui-badge">9</span></a>
  4. </li>
  5. <li class="layui-nav-item">
  6. <a href="">个人中心<span class="layui-badge-dot"></span></a>
  7. </li>
  8. <li class="layui-nav-item">
  9. <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
  10. <dl class="layui-nav-child">
  11. <dd><a href="javascript:;">修改信息</a></dd>
  12. <dd><a href="javascript:;">安全管理</a></dd>
  13. <dd><a href="javascript:;">退了</a></dd>
  14. </dl>
  15. </li>
  16. </ul>

是否瞬间上了个档次呢?

导航主题



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

</>code

  1. //如定义一个墨绿背景色的导航
  2. <ul class="layui-nav layui-bg-green" lay-filter="">
  3. </ul>

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

垂直/侧边导航

垂直导航HTML结构code

  1. <ul class="layui-nav layui-nav-tree" lay-filter="test">
  2. <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  3. <li class="layui-nav-item layui-nav-itemed">
  4. <a href="javascript:;">默认展开</a>
  5. <dl class="layui-nav-child">
  6. <dd><a href="javascript:;">选项1</a></dd>
  7. <dd><a href="javascript:;">选项2</a></dd>
  8. <dd><a href="">跳转</a></dd>
  9. </dl>
  10. </li>
  11. <li class="layui-nav-item">
  12. <a href="javascript:;">解决方案</a>
  13. <dl class="layui-nav-child">
  14. <dd><a href="">移动模块</a></dd>
  15. <dd><a href="">后台模版</a></dd>
  16. <dd><a href="">电商平台</a></dd>
  17. </dl>
  18. </li>
  19. <li class="layui-nav-item"><a href="">产品</a></li>
  20. <li class="layui-nav-item"><a href="">大数据</a></li>
  21. </ul>

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

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

导航可选属性/类

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

属性名 可选值 说明
lay-shrink
  • 空值(默认)
    不收缩兄弟菜单子菜单
  • all
    收缩全部兄弟菜单子菜单
展开子菜单时,是否收缩兄弟节点已展开的子菜单 (注:layui 2.2.6 开始新增
如:<ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul>
lay-unselect 无需填值 点击指定导航菜单时,不会出现选中效果(注:layui 2.2.0 开始新增
如:<li class="layui-nav-item" lay-unselect>刷新</li>
lay-bar
  • disabled
    禁用滑块跟随功能
在导航菜单主容器中配置,如:
<div class="layui-nav" lay-bar="disabled"> </div>
CSS 类
  • layui-nav-child-c
    子菜单居中对齐
  • layui-nav-child-r
    子菜单向右对齐
直接在子菜单标签配置即可,如:

</>code

  1. <dl class="layui-nav-child layui-nav-child-c">
  2. </dl>
上述两项为 layui 2.6.6 开始新增

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

HTML结构code

  1. <span class="layui-breadcrumb">
  2. <a href="">首页</a>
  3. <a href="">国际新闻</a>
  4. <a href="">亚太地区</a>
  5. <a><cite>正文</cite></a>
  6. </span>

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

HTML结构code

  1. <span class="layui-breadcrumb" lay-separator="-">
  2. <a href="">首页</a>
  3. <a href="">国际新闻</a>
  4. <a href="">亚太地区</a>
  5. <a><cite>正文</cite></a>
  6. </span>

当然,你还可以作为小导航来用,如:

娱乐| 八卦| 体育| 搞笑| 视频| 游戏| 综艺

HTML结构code

  1. <span class="layui-breadcrumb" lay-separator="|">
  2. <a href="">娱乐</a>
  3. <a href="">八卦</a>
  4. <a href="">体育</a>
  5. <a href="">搞笑</a>
  6. <a href="">视频</a>
  7. <a href="">游戏</a>
  8. <a href="">综艺</a>
  9. </span>

layui - 在每一个细节中,用心与你沟通