搜索组件模块
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
-

基础菜单 - 页面元素

菜单是页面必不可少的元素,我们希望它是通用的,所以在结构上,它的组成极其灵活。而事实上,在基础菜单还没有正式推出之前,垂直导航(layui-nav-tree)曾顶替了它的角色,尤其是在管理系统中发挥了举足轻重的作用。尽管它们本质上都属于「菜单」的范畴,但我们姑且约定将水平的称之为「导航」,垂直的称之为正统的「基础菜单」。它将十分有用,许多业务场景都能看到它的存在。
可依赖的模块:dropdown
菜单结构

通常基础菜单是搭配面板(layui-panel)使用的,但这并不是必须的。基础菜单有它独有的样式结构,以下是一个基本的示例:

  • 代码
  • 预览

</>HTML

  1. <div class="layui-panel">
  2. <ul class="layui-menu" id="docDemoMenu1">
  3. <li lay-options="{id: 100}">
  4. <div class="layui-menu-body-title">menu item 1</div>
  5. </li>
  6. <li lay-options="{id: 101}">
  7. <div class="layui-menu-body-title">
  8. <a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
  9. </div>
  10. </li>
  11. <li class="layui-menu-item-divider"></li>
  12. <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
  13. <div class="layui-menu-body-title">
  14. menu item 3 group <i class="layui-icon layui-icon-up"></i>
  15. </div>
  16. <ul>
  17. <li lay-options="{id: 1031}">menu item 3-1</li>
  18. <li lay-options="{id: 1032}">
  19. <div class="layui-menu-body-title">menu item 3-2</div>
  20. </li>
  21. </ul>
  22. </li>
  23. <li class="layui-menu-item-divider"></li>
  24. <li lay-options="{id: 104}">
  25. <div class="layui-menu-body-title">menu item 4</div>
  26. </li>
  27. <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
  28. <div class="layui-menu-body-title">
  29. menu item 5
  30. <i class="layui-icon layui-icon-right"></i>
  31. </div>
  32. <div class="layui-panel layui-menu-body-panel">
  33. <ul>
  34. <li lay-options="{id: 1051}">
  35. <div class="layui-menu-body-title">menu item 5-1</div>
  36. </li>
  37. <li lay-options="{id: 1051}">
  38. <div class="layui-menu-body-title">menu item 5-2</div>
  39. </li>
  40. </ul>
  41. </div>
  42. </li>
  43. <li lay-options="{id: 106}">
  44. <div class="layui-menu-body-title">menu item 6</div>
  45. </li>
  46. </ul>
  47. </div>
  • menu item 1
  • menu item 3 group
    • menu item 3-1
    • menu item 3-2
  • menu item 4
  • menu item 5
    • menu item 5-1
    • menu item 5-2
  • menu item 6

可以看到,它实则是一个 ul li 的层级嵌套,当需要出现「菜单组」和「子级菜单」时,只需要添加相对应的 class 类名即可。

菜单项类型

菜单项是由 li 元素组成的,以下将列举几种被支持的菜单项类型

类型 html 说明
常规菜单项 <li></li> 无需添加特定 class
可收缩菜单组 <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}"></li> 其中layui-menu-item-down为初始展开;layui-menu-item-up为初始收缩。
横向父子菜单 <li class="layui-menu-item-parent" lay-options="{type: 'parent'}"></li> 其子级菜单的结构参照上文的「菜单结构」,主要是需包含一层面板元素。
分割线 <li class="layui-menu-item-divider"></li> 一条横线,用于更好地划分菜单区域

其子级菜单遵循的列表类型也是一样的。需要注意的是,「可收缩菜单组」的子菜单仅需要再嵌套一层 ul 即可;而「横向父子菜单」还需要套一层 div class="layui-panel layui-menu-body-panel",以便让子菜单层次更加分明。

菜单项参数

在上文中,您可能已经多次注意到 lay-options="{}" 这个属性了,它正是我们所说的菜单项参数。当点击菜单列表时,回调中将会返回该属性所配置的全部参数,其中type参数是组件内部约定的,其它参数可以随意命名。如

</>code

  1. <li lay-options="{
  2. id: 100
  3. ,title: 'menu item 1'
  4. ,type: '' //支持的类型有:group、parent,具体用法参见上文
  5. ,aaa: '任意参数'
  6. }">内容</li>
事件触发

我们的dropdown组件不仅菜单的基本交互(如点击选中、菜单组展开收缩等)进行了支持,还提供了菜单的事件机制:

  • JS
  • HTML

</>JS

  1. layui.use('dropdown', function(){
  2. var dropdown = layui.dropdown;
  3. //菜单点击事件,其中 docDemoMenu1 对应的是菜单结构上的 id 指
  4. dropdown.on('click(docDemoMenu1)', function(options){
  5. var othis = $(this); //当前菜单列表的 DOM 对象
  6. console.log(options); //菜单列表的 lay-options 中的参数
  7. });
  8. });

</>HTML

  1. <div class="layui-panel">
  2. <ul class="layui-menu" id="docDemoMenu1">
  3. <li lay-options="{id: 100}">
  4. <div class="layui-menu-body-title">menu item 1</div>
  5. </li>
  6. </ul>
  7. </div>
结语

本篇所讲解的是基础菜单的静态展示,其提供的是一个基础的结构,事实上它还被动态封装在诸如下拉菜单、右键菜单等场景中。

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