站点菜单

内容设置

菜单区块使用自动调用的形式生成菜单内容，菜单创建与编辑可参考“站点设置” – “编辑站点菜单”。

配置选项

基本配置

全局样式

Select 区块对应的全局样式。

菜单

Select 选择网站中已创建的菜单。

Html 标签

Select 区块根元素的 Html 标签类型。

图标

Select 包含子菜单的菜单元素的指示图标。

新窗口打开

Boolean 菜单链接是否在新窗口打开。

交互配置

启用交互

Boolean 启用交互后，子菜单将自动隐藏，可设置滑过或点击显示。

触发

Select 设置菜单显示的触发事件类型。

动画

Select 设置菜单显示的动画类型。

偏移

Number 动画初始位置的偏移量（向下）。0 ～ 1000 的任意整数。

持续时长

Number 动画的持续时间，单位为秒。0 ～ 100 的任意数值，可为整数或浮点数。

延时

Number 面板动画播放前的延迟时间，单位为秒。0 ～ 100 的任意数值，可为整数或浮点数。

动画曲线

Select 动画加速度曲线。

自定义曲线

String 自定义曲线函数，为 GSAP 动画曲线，设置方式可参考 GSAP Eases Docs。

设备

Select 选择交互行为所启用的设备。

元素

<nav class="mk-site-menu">
  <ul class="el-menus-list">
    <li class="el-menu-item has-child">
      <a>菜单 1</a>
      <div class="el-sub-panel">
        <ul class="sub-menus">
          <li class="el-menu-item"><a>菜单 1.1</a></li>
          <li class="el-menu-item"><a>菜单 1.2</a></li>
          <li class="el-menu-item"><a>菜单 1.3</a></li>
        </ul>
      </div>
    </li>
    <li class="el-menu-item"><a>菜单 2</a></li>
    <li class="el-menu-item"><a>菜单 3</a></li>
  </ul>
</nav>

• 主容器 .mk-site-menu
• 菜单 .el-menus-list
• 菜单元素 .el-menu-item
• 子菜单 .el-sub-panel

其他

• 站点菜单的交互功能仅支持二级菜单，如多级菜单交互，请使用交互设置中的事件监听；
• 触发事件为滑过时，仅在桌面端有效，平板电脑及以下设备将自动切换为点击触发。